£% Windows User Experience Inter 
for Windows 7 and Windows Vista 


“Everything is best for something and worst for something else. 
The trick is knowing for what, when, for whom, and why.” —Bill Buxton 


Windows User Experience Interaction Guidelines 


The goals for these official Windows User Experience Interaction Guidelines for Windows®7 and Windows Vista® 
(or "UX Guide" for short) are to: 


- Establish a high quality and consistency baseline for all Windows-based applications. 
« Answer your specific user experience questions. 
« Make your job easier! 


What's new 

The following guidelines have been added since our last update: 
. Wizards 

UX Guide is downloadable and printable! 

By popular demand, we have UX Guide in PDF format. 

Feedback 


For technical support: 


- For assistance with specific tasks, try Windows Help and How-to. 
- For general help and support, go to Microsoft Help and Support. 


Last updated September 29, 2010 
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Guidelines 
These sections comprise the detailed user experience guidelines for Windows® 


Design Principles 


Controls 


Commands 
- Text 


Messages 


Interaction 


Windows 


Visuals 


Experiences 


Windows Environment 
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Design Principles 
Refer to these principles to help you design the user experience for your Windows®programs: 


- Windows User Experience Design Principles. These principles were used to design Windows 7. 


- Top Guidelines Violations. Some common mistakes and inconsistencies to watch out for in your user 
interface design. 


- How to Design a Great User Experience. A list for inspiration. 


- Powerful and Simple. Through carefully balanced feature selection and presentation, you can achieve both 
power and simplicity. 


- Designing with Windows Presentation Foundation. Guidelines to help you take advantage of Windows 
Presentation Foundation (WPF). 
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Windows User Experience Design Principles 


Reduce concepts to increase confidence 


- Have you introduced anew concept? Why? Is it necessary? 
- Can you get rid of unneeded concepts? 

« Are you making meaningful distinctions? 

- Does the UX continue the same concept? 


Small things matter, good and bad 


- What are the important "small things" seen often or by many? 
- What small problems are you solving? 

- Do less better. 

- Don't cut the small things in your experiences. 

- Plan for the thoughtful details. 

- Fix the small bugs. 


Be great at "look" and "do" 


- What is your UX great at? Does its look reflect what it is great at? 
- Does the first thing users see reflect what the UX is great at? 

- Does the UX match expectations? 

- Is it obvious what users can do? 

- Are you providing only the necessary steps? 


Solve distractions, not discoverability 


- Reduce distractions. 
- Don't let features compete with themselves. 
« Commit to new functionality. 


- These are not solutions to poor discoverability: 
o Pinning an icon in the Start menu. 


o Putting an icon on the desktop. 

o Putting an icon in the notification area. 
o Using a notification. 

o Having a first run experience. 

o Having a tour. 


UX before knobs and questions 


- Turn down the volume of questions. 
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- Ask once. 

- Don't require configuration to get value. 
- Was the question asked already? 

- Look for opportunities to consolidate. 


Personalization, not customization 


- Does the feature allow users to express an element of themselves? 
- Have you made the distinction between personalization and customization? 


- Does the personalization have to be a new feature, or can it make use of existing features and information 
(such as the user's location, background picture, or tile)? 


Value the life cycle of the experience 


- Consider the user experience at all stages: 
o Installation and creation. 


o First use and customization. 

o Regular use. 

o Management and maintenance. 
o Uninstall or upgrade. 


- Walk through the experience as if it has been used for 12 months. Does it have: 
o Realistic content. 


o Realistic volume. 
Time matters, so build for people on the go 


- All UX principles apply equally at 12-inch and 20-inch screen sizes. 

- Be interruptible. 

- Account for starting and stopping (fast return, and do not get in the way of other UX). 
- Account for getting and losing connectivity. 

- Performance is the universal UX killer. 


Other resources 
To learn more about how these principles were used in the Windows 7 design process, see: 


- Design Principles for Windows 7 


- Designing the Windows 7 Desktop Experience 


© 2010, Microsoft Corporation. All rights reserved. Page 5 of 882 


How 


to Design a Great User Experience 


While simply expressed, each of these ideas is profound. We could make each an article, but we'll give a short 
explanation instead. Fill in any missing details with examples from your own experience. 


ls 


10. 


iI. 
© 2010, 


Nail the basics 

The core scenarios—the primary reasons people use your Windows®program—are far more important than 
the fringe scenarios—things people might do but probably won't. Nail the basics! (And if you do, users will 
overlook fringe problems.) 


. Design experiences, not features 


Design experiences from beginning to end, not just individual features. And maintain your standards 
throughout the entire product experience. For example, if your program's setup is hard to use and is buggy, 
users will assume your program is hard to use and buggy too. Why should they assume otherwise? 


. Be great at something 


Think about how real users (not the marketing or PR departments) will describe your program. Identify your 
target users and make sure they can say "I love this program! It does A, B, and C super well!" If users can't say 
that about your program, what's the point? Today, "good enough" is no longer good enough—make your 
users love it. 


. Don't be all things to all people 


Your program is going to be more successful by delighting its target users than attempting to satisfy 
everyone. Remember that it is literally impossible to focus on everything. 


. Make the hard decisions 


Do you really need that feature, command, or option? If so, do it well. If not, cut it! Don't avoid difficult 
decisions by making everything optional or configurable. 


. Make the experience like a friendly conversation 


Think of your UI as a conversation between you and your target users. Suppose you're looking over a user's 
shoulder and he or she asks, "What do | do here?" Think about the explanation you would give...the steps, 
their order, the language you'd use, and the way you explain things. Also think about what you wouldn't say. 
That's what your UI should be—like a conversation between friends—rather than something arcane that 
users have to decipher. 


. Do the right thing by default 


Sure, you can pile on options to allow users to change things, but why? Choose safe, secure, convenient 
default values. Also, make the default experience the right experience for your target users. Don't assume 
that they will configure their way out of a bad initial experience. They won't. 


. Make it just work 


People want to use your program, not configure it or learn a bunch of things. Choose an initial configuration, 
make it obvious how to do the most common and important tasks, and get your program working right away. 


. Ask questions carefully 


Avoid asking unessential questions using modal dialogs—prefer modeless alternatives. Better yet, the current 
context can reveal the user's intent, often eliminating the need to ask at all. If you must ask a question in your 
UI, express it in terms of users' goals and tasks, not in terms of technology. Provide options that users 
understand (again, phrased in terms of goals and tasks, not technology) and clearly differentiate. M ake sure 
to provide enough information for users to make informed decisions. 


Make it a pleasure to use 

Make sure your program serves its purpose well. Have the right set of features and put the features in the 
right places. Pay attention to detail, and make sure everything is polished. Don't assume that users won't 
notice small things. They will. 


Make it a pleasure to see 
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12. 


13. 


14. 


15; 


16. 


iL? 


Use the standard Windows look, including standard window frames, fonts, system colors, common controls 
and dialog boxes, and standard layout. Avoid custom UI and use branding with restraint. Use standard 
Windows icons, graphics, and animations whenever possible (and legal!) For your own graphics and icons, 
use a professional designer. (If you can't afford one, use a few simple graphics—or even none at all.) 

And don't assume that providing skins will compensate for an unexciting look. M ost users won't bother with 
them and having one great look makes a much better impression than having dozens of not-so-great ones. 


Make it responsive 

Your program's responsiveness Is crucial to its overall experience—users find unnecessarily slow and 
unresponsive programs unusable. For every feature where performance Is an issue, first understand your 
users' goals and expectations, then choose the lightest weight design that achieves these goals. Generally, 
tasks that can take longer than 10 seconds need more informative feedback and the ability to cancel. Keep in 
mind that users' perception of speed is just as important as the actual speed, and the perception of speed is 
primarily determined by how quickly a program becomes responsive. 


Keep it simple 
Strive for the simplest design that does the job well. Expand the design beyond that only as required. Don't 
have three ways to do something when one will do. Eliminate or reduce all that unnecessary junk! 


Avoid bad experiences 
Easier said than done, but users' overall perception of your program is more often determined by the quality 
of the bad experiences than of the good ones. 


Design for common problems 

Is your design great—until the user makes a mistake or the network connection is lost? Anticipate and design 
for common problems, user mistakes, and other errors. Consider things like the network being slow or 
unavailable, devices being not installed or unavailable, and users giving incorrect input or skipping steps. At 
each step in your program, ask yourself: What are the worst likely things that could happen? Then see how 
well your program behaves when they do happen. M ake sure all error messages clearly explain the problem 
and give an actionable solution. 


Don't be annoying 

Most likely, anything users routinely dismiss without performing any action should be redesigned or 
removed. This is especially true for anything users see repeatedly, such as error messages, warnings, 
confirmations, and notifications. Never interrupt something users care about with something they don't care 
about. Never cover something beautiful with something ugly. Use sound with extreme restraint. Ul related to 
security and legal issues (for example, consent or license terms) are possible exceptions. 


Reduce effort, knowledge, and thought 
To reduce the effort, knowledge, and thought required to use your program: 

o Explicit is better than implicit. Put the information users need to know directly on the screen. 
Carefully craft the main instruction on windows and pages to clearly communicate the purpose of the 
Ul. 

Automatic is better than manual. Try to help users by doing things automatically whenever practical 


and desirable. A simple test: Close your program, then restart it and perform the most common task. 
How much manual effort can you eliminate? 


) 


o Concise is better than verbose. Put it on the screen, but concisely. Get right to the point! Design text 
for scanning, not immersive reading. Use Help links for helpful, supplemental, but not essential 
information. 


Constrained is better than unconstrained. When choosing controls, the control constrained to valid 
input is usually the best choice. 


fe) 


o Enabled is better than disabled. Disabled controls are often confusing, so use them only when users 


can easily deduce why the control is disabled. Otherwise, remove the control if it doesn't apply or 
leave it enabled and give helpful feedback. 


o Remembered is better than forgotten. Except for situations that involve security and privacy, it's 
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better to remember users’ previous input and actions and make them easy to do again than to make 
users start over each time. 


o Feedback is better than being clueless. Give clear feedback to indicate whether a task is being done 
or has failed. Don't make the user guess. 


18. Follow the guidelines 
Of course! Consider UX Guide to be the minimum quality and consistency bar for Windows-based programs. 
Use it to follow best practices, make routine decisions, and to just make your job easier. Focus your creative 
energy on the important things—whatever your program is all about—not the routine. Don't create that 
weird program that nobody can figure out how to use. Follow the guidelines and make your experience stand 
out while fitting in. 


19. Test your UI 
You won't know if you've got it right until you've tested your program with real target users with a usability 
study. Most likely, you'll be (unpleasantly) surprised by the results. Be glad to have your UI criticized—that's 
required for you to do your best work. And be sure to collect feedback after your program ships. 
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Top Guidelines Violations 


Windows 
Layout 

Text 

Controls 
Keyboard 
Mouse 

Dialog boxes 
Property sheets 
Wizards 

Wizard pages 
Error messages 
Warning messages 
Confirmations 
Icons 

Help 


Here's a collection of some of the most frequently violated guidelines in UX Guide. You can use this as a checklist 
to make sure your program user interface gets these important items right. 


Windows 


- Support the minimum Windows effective resolution of 800x600 pixels. For critical user interfaces (UIs) that 
must work in safe mode, support an effective resolution of 640x480 pixels. Be sure to account for the space 
used by the taskbar by reserving 48 vertical relative pixels for windows displayed with the taskbar. 


- Optimize resizable window layouts for an effective resolution of 1024x768 pixels. Automatically resize these 
windows for lower screen resolutions in a way that is still functional. 


- Be sure to test your windows in 96 dots per inch (dpi) (at 800x600 pixels), 120 dpi (at 1024x768 pixels), and 
144 dpi (at 1200x900 pixels) modes. Check for layout problems, such as clipping of controls, text, and 
windows, and stretching of icons and bitmaps. 


- For programs with touch and mobile use scenarios, optimize for 120 dpi. High-dpi screens are currently 
prevalent on touch and mobile PCs. 


. Ifa window is an owned window, initially display it "centered" on top of the owner window. Never 
underneath. For subsequent display, consider displaying it in its last location (relative to the owner window) if 
doing so is likely to be more convenient. 


. If a window is contextual, always display it near the object that it was launched from. However, place it out 
of the way (preferably offset down and to the right) so that the object isn't covered by the window. 


Layout 


- Size controls and panes within a window to match their typical content. Avoid truncated text and their 
associated ellipses. Users should never have to interact with a window to view its typical contenta€” reserve 
resizing and scrolling for unusually large content. Specifically check: 

o Control sizes. Size controls to their typical content, making controls wider, taller, or multi-line if 
necessary. Size controls to eliminate or reduce scrolling in windows that have plenty of available 
space. Also, there should never be truncated labels, or truncated text within windows that have 
plenty of available space. However, to make text easier to read, consider limiting line widths to 65 
characters. 
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o Column widths. M ake sure list view columns have suitable default, minimum, and maximum sizing. 
Choose list views default column widths that don't result in truncated text, especially if there is space 
available within the list view. 


o Layout balance. The layout of a window should feel roughly balanced. If the layout feels left-heavy, 
consider making controls wider and moving some controls more to the right. 


o Layout resize. When a window is resizable and data is truncated, make sure larger window sizes show 
more data. When data is truncated, users expect resizing windows to show more information. 


- Set a minimum window size if there is a size below which the content is no longer usable. For resizable 


Text 


controls, set minimum resizable element sizes to their smallest functional sizes, such as minimum functional 
column widths in list views. 


- Use ordinary, conversational terms when you can. Focus on the user goals, not technology. This is especially 


effective if you are explaining a complex technical concept or action. Imagine yourself looking over the user's 
shoulder and explaining how to accomplish the task. 


- Be polite, supportive, and encouraging. The user should never feel condescended to, blamed, or intimidated. 


- Remove redundant text. Look for redundant text in window titles, main instructions, supplemental 


instructions, content areas, command links, and commit buttons. Generally, leave full text in main 
instructions and interactive controls, and remove any redundancy from the other places. 


- Use title-style capitalization for titles, and sentence-style capitalization for all other UI elements. Doing so is 


more appropriate for the Windows@tone. 
o Exception: For legacy applications, you may use title-style capitalization for command buttons, 
menus, and column headings if necessary to avoid mixing capitalization styles. 


. For feature and technology names, be conservative in capitalizing. Typically, only major components should 


be capitalized (using title-style capitalization). 


- For feature and technology names, be consistent in capitalizing. If the name appears more than once ona UI! 


screen, it should always appear the same way. Likewise, across all UI screens in the program, the name 
should be consistently presented. 


- Don't capitalize the names of generic user interface elements, such as toolbar, menu, scroll bar, button, and 


icon. 
o Exceptions: Address bar, Links bar, ribbon. 


- Don't use all capital letters for keyboard keys. Instead, follow the capitalization used by standard keyboards, 


or lowercase if the key is not labeled on the keyboard. 


- Ellipses mean incompleteness. Use ellipses in Ul text as follows: 


o Commands, Indicate that a command needs additional information. Don't use an ellipsis whenever an 
action displays another window—only when additional information is required. Commands whose 
implicit verb is to show another window don't take an ellipsis, such as Advanced, Help, Options, 
Properties, or Settings. 


o Data. Indicate that text is truncated. 
o Labels. Indicate that a task is in progress (for example, "Searching..."). 


Tip: Truncated text in a window or page with unused space indicates poor layout or a default window size 
that is too small. Strive for layouts and default window sizes that eliminate or reduce the amount of 
truncated text. For more information, see Layout. 


- Don't use blue text that isn't a link, because users may assume that it is a link. Use bold or a shade of gray 


where you'd otherwise use colored text. 


- Use bold sparingly to draw attention to text users must read. 
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- Use the main instruction to explain concisely what users should do in a given window or page. Good main 
instructions communicate the user's objective rather than focusing just on manipulating the UI. 


- Express the main instruction in the form of an imperative direction or specific question. 
- Don't place periods at the end of control labels or main instructions. 
. Use one space between sentences. Not two. 


Controls 


- General 
o Label every control or group of controls. Exceptions: 
a Text boxes and drop-down lists can be labeled using prompts. 


a Subordinate controls use the label of their associated control. Spin controls are always 
subordinate controls. 


o For all controls, select the safest (to prevent loss of data or system access), most secure value by 
default. If safety and security aren't factors, select the most likely or convenient value. 


o Prefer constrained controls. Use constrained controls like lists and sliders whenever possible, instead 
of unconstrained controls like text boxes, to reduce the need for text input. 


o Reconsider disabled controls. Disabled controls can be hard to use because users literally have to 
deduce why they are disabled. Disable a control when users expect it to apply and they can easily 
deduce why the control is disabled. Remove the control when there is no way for users to enable it or 
they don't expect it to apply, or leave it enabled, but provide an error message when it is used 
incorrectly. 

a Tip: If you aren't sure whether you should disable a control or provide an error message, start 
by composing the error message that you might provide. If the error message contains helpful 
information that target users aren't likely to quickly deduce, leave the control enabled and 
provide the error. Otherwise, disable the control. 


- Command buttons 
o Prefer specific labels over generic ones. Ideally users shouldn't have to read anything else to 
understand the label. Users are far more likely to read command button labels than static text. 
= Exception: Don't rename the Cancel button if the meaning of cancel is unambiguous. Users 
shouldn't have to read all the buttons to determine which button cancels an action. However, 
rename Cancel if it is unclear what action is being canceled, such as when there are several 
pending actions. 


o When asking a question, use labels that match the question. For example, provide Yes and No 
responses to a yes or no question. 


o Don't use Apply buttons in dialog boxes that aren't property sheets or control panel items. The 
Apply button means apply the pending changes, but leave the window open. Doing so allows users to 
evaluate the changes before closing the window. However, only property sheets and control panel 
items have this need. 


o Label a button Cancel if canceling returns the environment to its previous state (leaving no side 
effect); otherwise, label the button Close (if the operation is complete), or Stop (if the operation is in 
progress) to indicate that it leaves the current changed state intact. 


« Command links 


o Always present command links in a set of two or more. Logically, there is no reason to ask a question 
that has only one answer. 


o Provide an explicit Cancel button. Don't use a command link for this purpose. Quite often, users 
realize that they don't want to perform a task. Using a command link to cancel would require users to 
read all the command links carefully to determine which one means to cancel. Having an explicit 


Cancel button allows users to cancel a task efficiently. 
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o If providing an explicit Cancel button leaves a single command link, provide both a command link to 
cancel and a Cancel button. Doing so makes it clear that users have a choice. Phrase this command 
link in terms of how it differs from the first response, instead of just "Cancel" or some variation. 


- "Don't show this <item> again" check boxes 
o Consider using a "Don't show this <item> again" option to allow users to suppress a recurring dialog 
box, only if there isn't a better alternative. It is better always to show the dialog if users really need 
it, or simply eliminate it if they don't. 
o Replace <item>with the specific item. For example, Don't show this reminder again. When referring 
to a dialog box in general, use Don't show this message again. 


o Clearly indicate when user input will be used for future default values by adding the following 
sentence under the option: Your selections will be used by default in the future. 


o Don't select the option by default. If the dialog box really should be displayed only once, do so 
without asking. Don't use this option as an excuse to annoy usersa€”make sure the default behavior 
isn't annoying. 

o If users select the option and click Cancel, this option does take effect. This setting is a meta-option, 
so it doesn't follow the standard Cancel behavior of leaving no side effect. Note that if users don't 
want to see the dialog in the future, most likely they want to cancel it as well. 

- Links 
o Don't assign an access key. Links are accessed using the Tab key. 


o Don't add "Click" or "Click here" to the link text. It isn't necessary because a link implies clicking. 


- Tooltips 
o Use tooltips to provide labels for unlabeled controls. You don't have to give labeled controls tooltips 
simply for the sake of consistency. 


o Tooltips may also provide more detail for labeled toolbar buttons if doing so is helpful. Don't just 
repeat or give a wordy restatement of what is already in the label. 


o Avoid covering the object the user is about to view or interact with. Always place the tip on the side 
of the object, even if that requires separation between the pointer and the tip. Some separation isn't 
a problem as long as the relationship between the object and its tip is clear. 
» Exception: Full name tooltips used in lists and trees. 


o For collections of items, avoid covering the next object that the user is likely to view or interact 
with. For horizontally arranged items, avoid placing tips to the right; for vertically arranged items, 
avoid placing tips below. 


. Progressive disclosure 
o Use More/ Fewer progressive disclosure buttons to hide advanced or rarely used options, 
commands, and details that users typically don't need. Don't hide commonly used items, because 
users might not find them. But make sure whatever is hidden has value. 


o If the surface always displays some options, commands, or details, use the following label pairs: 
= More/ Fewer options. Use for options or a mixture of options, commands, and details. 


= More/ Fewer commands. Use for commands only. 
= More/ Fewer details. Use for information only. 
= More/ Fewer <object name>. Use for other object types, such as folders. 


o Otherwise: 
= Show/Hide options. Use for options or a mixture of options, commands, and details. 


= Show/Hide commands. Use for commands only. 
= Show/Hide details. Use for information only. 
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= Show/Hide <object name>. Use for other object types, such as folders. 


- Progress bars 
o Use determinate progress bars for operations that require a bounded amount of time, even if that 
amount of time cannot be accurately predicted. Indeterminate progress bars show that progress is 
being made, but provide no other information. Don't choose an indeterminate progress bar based 
only on the possible lack of accuracy alone. 


o Provide a time remaining estimate if you can do so accurately. Time remaining estimates that are 
accurate are useful, but estimates that are way off the mark or bounce around significantly aren't 
helpful. You may need to perform some processing before you can give accurate estimates. If so, 
don't display potentially inaccurate estimates during this initial period. 


o Don't restart progress. A progress bar loses its value if it restarts (perhaps because a step in the 
Operation completes) because users have no way of knowing when the operation will complete. 
Instead, have all the steps in the operation share a portion of the progress and have the progress bar 
go to completion once. 


o Provide useful progress details. Provide additional progress information, but only if users can do 
something with it. Make sure the text is displayed long enough for users to be able to read it. 


o Don't combine a progress bar with a busy pointer. Use one or the other, but not both at the same 
time. 


- Prompts 
o Use a prompt when screen space is at such a premium that using a label or instruction is 
undesirable, such as on a toolbar. 


o The prompt is primarily for identifying the purpose of the text box or combo box in a compact way. 
It must not be crucial information that the user needs to see while using the control. 


o The prompt text must not be confused with real text. To do this: 
« Draw the prompt text in italic gray and the actual input text in roman black. 


= The prompt text should not be editable and should disappear once users click in or tab into 
the text box. 
= Exception: If the text box has default input focus, the prompt is displayed, and it 
disappears once the user starts typing. 


o Don't use ending punctuation or ellipsis. 


- Notifications 
o Use notifications for events that are unrelated to the current user activity, don't require immediate 
user action, and users can freely ignore. 


o Don't abuse notifications: 
a Use notifications only if you need to. When you display a notification, you are potentially 
interrupting users or even annoying them. M ake sure that interruption is justified. 


a Use notifications for non-critical events or situations that don't require immediate user 
action. For critical events or situations that require immediate user action, use an alternative 
UI element (such as a modal dialog box). 


= Don't use notifications for feature advertisements! 


Keyboard 


- Assign initial input focus to the control that users are most likely to interact with first, which is often the 
first interactive control. If the first interactive control isn't a good choice, consider changing the window's 
layout. 


. Assign tabs stops to all interactive controls, including read-only edit boxes. Exceptions: 
o Group sets of related controls that behave as a single control, such as radio buttons. Such groups have 
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a single tab stop. 
o Properly contain groups so that the arrow keys cycle both forward and backward within the group 
and stay within the group. 


- Tab order should flow from left to right, top to bottom. Generally, tab order should follow reading order. 
Consider making exceptions for commonly used controls by putting them earlier in the tab order. Tab should 
cycle through all the tab stops in both directions without stopping. Within a group, tab order should be in 
sequential order, without exceptions. 


- Within a tab stop, the arrow key order should flow from left to right, top to bottom, without exceptions. 
The arrow keys should cycle through all items in both directions without stopping. 


. Present the commit buttons in the following order: 
o OK/[Do it]/Yes 


o [Don't do it]/No 
o Cancel 
o Apply (if present) 
where [Do it] and [Don't do it] are specific responses to the main instruction. 


- Don't confuse access keys with shortcut keys. While both access keys and shortcut keys provide keyboard 
access to UI, they have different purposes and guidelines. 

- Whenever possible, assign unique access keys to all interactive controls or their labels. Read-only text 
boxes are interactive controls (because users can scroll them and copy text), so they benefit from access 
keys. Don't assign access keys to: 

o OK, Cancel, and Close buttons. Enter and Esc are used for their access keys. However, always assign an 
access key to a control that means OK or Cancel, but has a different label. 


. Assign shortcut keys to the most commonly used commands. Infrequently used programs and features don't 
need shortcut keys because users can use access keys instead. 


- Don't make a shortcut key the only way to perform a task. Users should also be able to use the mouse or the 
keyboard with Tab, arrow, and access keys. 


- Don't assign different meanings to well-known shortcut keys. Because they are memorized, inconsistent 
meanings for well-known shortcuts are frustrating and error prone. For the well-known shortcut keys used by 
Windows programs, see Windows Keyboard Shortcut Keys. 


- Don't try to assign system-wide program shortcut keys. Your program's shortcut keys will have effect only 
when your program has input focus. 


Mouse 


- Never require users to click an object to determine if it is clickable. Users must be able to determine 
Clickability by visual inspection alone. 
o Primary UI (such as commit buttons) must have a static click affordance. Users shouldn't have to 
hover to discover primary UI. 


o Secondary UI (such as secondary commands or progressive disclosure controls) can display their click 
affordance on hover. 


o Text links should statically suggest link text, and then display their click affordance (underline or other 
presentation change, with hand pointer) on hover. 


o Graphics links only display a hand pointer on hover. 


- Use the hand (or "link select") pointer only for text and graphic links. Otherwise, users would have to click 
On objects to determine if they are links. 
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Dialog boxes 


- Modal dialog boxes require interaction, so use them for things that users must respond to before 
continuing with their task. M ake sure the interruption is justified, such as for critical or infrequent, one-off 
tasks that require completion. Otherwise, consider modeless alternatives. 


- Modeless dialog boxes don't require interaction, so use them when users need to switch between a dialog 
box and the owner window. They are best used for frequent, repetitive, or ongoing tasks. However, ribbons, 
toolbars, and palette windows are often better alternatives. 


Property Sheets 


- Make sure the properties are necessary. Don't clutter your property pages with unnecessary properties just 
to avoid making hard design decisions. 


- Present properties in terms of user goals instead of technology. | ust because a property configures a specific 
technology doesn't mean that you must present the property in terms of that technology. 
o If you must present settings in terms of technology (perhaps because your users recognize the 
technology's name), include a brief description of the user benefit. 


. Use specific, meaningful tab labels. Avoid generic tab labels that could apply to any tab, such as General, 
Advanced, or Settings. 


- Avoid General pages. You aren't required to have a General page. Use a General page only if: 
o The properties apply to several tasks and are meaningful to most users. Don't put specialized or 
advanced properties on a General page, but you can make them accessible through a command 
button on the General page. 


o The properties don't fit a more specific category. If they do, use that name for the page instead. 


- Avoid Advanced pages. Use an Advanced page only if: 
o The properties apply to uncommon tasks and are meaningful primarily to advanced users. 


o The properties don't fit a more specific category. If they do, use that name for the page instead. 


- Don't use tabs if a property window has only a single tab and isn't extensible. Use a regular dialog box with 
OK, Cancel, and an optional Apply button instead. However, extensible property windows (which can be 
extended by third parties) must use tabs. 


Wizards 


- Consider lightweight alternatives first, such as dialog boxes, task panes, or single pages. Wizards are a 
heavy UI, best used for multi-step, infrequently performed task. You don't have to use wizards—you can 
provide helpful information and assistance in any UI. 


- Use Next only when advancing to the next page without commitment. Advancing to the next page is 
considered a commitment when its effect can't be undone by clicking Back or Cancel. 


- Use Back only to correct mistakes. Aside from correcting mistakes, users shouldn't have to click Back to make 
progress in a task. 


- When users are committing to a task, use a commit button that is a specific response to the main 
instruction (for example, Print, Connect, or Start). Don't use generic labels like Next (which doesn't imply 
commitment) or Finish (which isn't specific) for committing a task. The labels on these commit buttons should 
make sense on their own. Always start commit button labels with a verb. Exceptions: 

o Use Finish when the specific responses are still generic, such as Save, Select, Choose, or Get. 


o Use Finish to change a specific setting or a collection of settings. 


« Use command links only for choices, not commitments. Specific commit buttons indicate commitment far 
better than command links in a wizard. 
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- When using command links, hide the Next button, but leave the Cancel button. 


- Use Close for Follow-Up and Completion pages. Don't use Cancel because closing the window won't 
abandon any changes or actions done at this point. Don't use Done because it isn't an imperative verb. 


- Don't use "wizard" in wizard names. For example, use "Connect to a Network" instead of "Network Setup 
Wizard." However, it's acceptable to refer to wizards as wizards. For example: "If you're setting up a network 
for the first time, you can get help by using the Connect to a Network wizard." 


. Preserve user selections through navigation. For example, if the user makes changes, clicks Back, then Next, 
those changes should be preserved. Users don't expect to have to re-enter changes unless they explicitly 
chose to clear them. 


Wizard pages 


- Focus on efficient decision making. Reduce the number of pages to focus on essentials. Consolidate related 
pages, and take optional pages out of the main flow. Having users click Next completely through your wizard 
may seem like a good experience at first, but if users never need to change the defaults, the pages are 
probably unnecessary. 


- Don't use Welcome pages— make the first page functional whenever possible. Use an optional Getting 
Started page only when: 
o The wizard has prerequisites that are necessary to complete the wizard successfully. 


o Users may not understand the purpose of the wizard based on its first Choice page, and there isn't 
room for further explanation. 


o The main instruction for Getting Started pages is "Before you begin:". 


- On pages in which users are asked to make choices, optimize for the most likely cases. These kinds of pages 
should present actual choices, not just instructions. 
o If you don't use a Getting Started page, explain the purpose of the wizard at the top of the first page 
of choices. 


- Use Commit pages to make it clear when users are committing to the task. Usually the Commit page is the 
last page of choices, and the Next button is relabeled to indicate the task being committed. 
o Don't use Summary pages that merely summarize the user's previous selections, unless the task is 
risky (involving security, or loss of time or money) or there is a good chance that users might not 
understand their selections and need to review them. 


- Don't use Congratulations pages that do nothing but end the wizard. If the wizard results are clearly 
apparent to users, just close the wizard on the final commit button. 
o Use Follow-Up pages when there are related tasks that users are likely to do as follow-up. Avoid 
familiar follow-up tasks, such as "Send an e-mail message." 


o Use Completion pages only when the results aren't visible and there's no better way to provide 
feedback for task completion. 


o Wizards that have Progress pages must use a Completion page or Follow-Up page to indicate task 
completion. For long-running tasks, close the wizard on the Commit page and use notifications to give 
feedback. 


Error messages 


- Don't give error messages when users aren't likely to perform an action or change their behavior as the 
result of the message. If there is no action users can take, or if the problem isn't significant, suppress the 
error message. 


- Whenever possible, propose a solution so users can fix the problem. However, make sure the proposed 
solution is likely to solve the problem. Don't waste users’ time by suggesting possible, but improbable, 
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solutions. 


- Be specific. Avoid vague wording, such as syntax error and illegal operation. Provide specific names, locations, 
and values of the objects involved. 


- Don't use phrasing that blames the user or implies user error. Avoid using you and your in the phrasing. 
While the active voice is generally preferred, use the passive voice when the user is the subject and might feel 
blamed for the error if the active voice were used. 


- Don't use OK for error messages. Users don't view errors as being OK. If the error message has no direct 
action, use Close instead. 


- Don't use the following words: 
o Error, failure (use problem instead) 


o Failed to (use unable to instead) 

o Illegal, invalid, bad (use incorrect or not valid instead) 
o Abort, kill, terminate (use stop instead) 

o Catastrophic, fatal (use serious instead) 


These terms are unnecessary and contrary to the encouraging tone of Windows. Instead, an error icon, when 
used correctly, sufficiently communicates that there is a problem. 


- Don't accompany error messages with sound effects. Doing so is jarring and unnecessary. 
Warning messages 


- Warnings describe a condition that might cause a problem in the future. Warnings aren't errors or 
questions, so don't phrase routine questions as warnings. 


- Don't give warning messages when users aren't likely to perform an action or change their behavior as the 
result of the message. If there is no action users can take, or if the condition isn't significant, suppress the 
warning message. 


Confirmations 


- Don't use unnecessary confirmations. Use confirmations only when: 
o There is a clear reason not to proceed and a reasonable chance that sometimes users won't. 


o The action has significant consequences or cannot be easily undone. 

o The action has consequences that users might not be aware of. 

o Proceeding with the action requires users to make a choice that doesn't have a suitable default. 
o Given the current context, users are likely to have performed an action in error. 


- Phrase confirmations as a yes or no question, and provide yes or no answers. Unlike other types of dialog 
boxes, confirmations are designed to prevent users from making quick decisions. If users don't put thought 
into their response, a confirmation has no value. 


Icons 


- Allicons should adhere to the Aero-style icon guidelines. Replace all Windows XP-style icons. 


- Choose standard icons based their message type, not the severity of the underlying issue: 
o Error. An error or problem that has occurred. 


o Warning. A condition that might cause a problem in the future. 
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o Information. Useful information. 
If an issue combines different message types, focus on the most important aspect that users need to act on. 


- Icons must always match the main instruction or other corresponding text. 


- Error icons aren't needed for non-critical user input problems. However, icons are needed for in-place 


errors, because otherwise such contextual feedback would be too easy to overlook. 


- Don't use warning icons to "soften" non-critical errors. Errors aren't warnings—apply the error icon 


guidelines instead. 


- For question dialogs, use warning icons only for questions with significant consequences. Don't use warning 


Help 


icons for routine questions. 


. Link to specific, relevant Help topics. Don't link to the Help home page, the table of contents, a list of search 


results, or a page that just links to other pages. Avoid linking to pages structured as a large list of frequently 
asked questions, because it forces users to search for the one that matches the link they clicked. Don't link to 
specific Help topics that aren't relevant and helpful to the task at hand. Never link to empty pages. 


- Don't put Help links on every window or page for the sake of consistency. Providing a Help link in one place 


doesn't mean that you have to provide them everywhere. 


- Whenever possible, phrase Help links text in terms of the primary question answered by the Help content. 


Don't use the "Learn more about" or "Get help with this" phrasing. 


- Use the entire Help link for the link text, not just the keywords. 


. Use complete sentences. 


- Don't use ending punctuation or ellipses, except for question marks. 


. If the Help content is online, make that clear in the link text. Doing so helps make the result of the links 


predictable. 
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Powerful and Simple 


Powerful: 


Spelling and Grammar: English (United States) 


Suggestions: 


Dictionary language: [English (United States) 
(¥] Check grammar 


Powerful and simple: 


uncomplicated 


Ignore Once 
Grammar... 


About This Sentence 


Look Up... 


The ideal Windows®based application is both powerful and simple. Of course you want your application to be 
powerful and of course you want it to be simple, but can you achieve both? There is a natural tension between 
these goals, but that tension is far from irreconcilable. You can achieve both power and simplicity through 
carefully balanced feature selection and presentation. 


Powerful 


What does "power" really mean in terms of software? An application might be considered powerful if it is jam- 
packed full of features, having a tremendous breacth of functionality in an attempt to be all things to all users. 
Such a design is not likely to be successful because an untargeted feature set is unlikely to satisfy the needs of 
anyone. This is not the type of power that we are after. 


An application is powerful when it has the right combination of these characteristics: 
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Enabling. The application satisfies the needs of its target users, enabling them to perform tasks that they couldn't otherwise 
do and achieve their goals effectively. 


Efficient. The application enables users to perform tasks with a level of productivity and scale that wasn't possible before. 


Versatile. The application enables users to perform a wide range of tasks effectively in a variety of circumstances. 


Direct. The application feels like it is directly helping users achieve their goals, instead of getting in the way or requiring 
unnecessary steps. Features like shortcuts, keyboard access, and macros improve the sense of directness. 


Flexible. The application allows users complete, fine-grained control over their work. 


Integrated. The application is well integrated with Microsoft ®Windows® allowing it to share data with other applications. 


Advanced. The application has extraordinary, innovative, state-of-the-art features that are not found in competing solutions. 


Some of these characteristics depend upon the perception of the user and are relative to users’ current 
capabilities. What is considered powerful may change over time, so today's advanced search feature might be 
commonplace tomorrow. 


All these characteristics can be combined into our definition of power: 
An application is powerful when it enables its target users to realize their full potential efficiently. 
Thus, the ultimate measure of power is productivity, not the number of features. 


Different users need help in achieving their full potential in different ways. What is enabling to some users might 
harm versatility, directness, and control for others. Well-designed software must balance these characteristics 
appropriately. For example, a desktop publishing system designed for nonprofessionals might use wizards to walk 
users through complex tasks. Such wizards enable the target users to perform tasks that they otherwise wouldn't 
be able to perform. By contrast, a desktop publishing system for professionals might focus on directness, 
efficiency, and complete control. For users of such an application, wizards may be limiting and frustrating. 


If you do only one thing... 
Understand your target users' goals and craft a feature set that enables them to achieve those goals productively. 


Simple 
We define simplicity as follows: 


Simplicity is the reduction or elimination of an attribute of a design that target users are aware of and consider 
unessential. 


In practice, simplicity is achieved by selecting the right feature set and presenting the features in the right way. 
This reduces the unessential, both real and perceived. 


Simplicity is dependent upon the perception of users. Consider how the effect of an automatic transmission 
depends on a user's perspective: 


- For the typical driver (the target user), an automatic transmission eliminates the need for a manual gear shift and clutch, 
making a car much easier to drive. A manual gear shift and clutch are not essential to the task of driving, so they are 
removed to achieve simplicity. 


- Fora professional race car driver, having direct control over the transmission is essential to being competitive. An automatic 
transmission negatively affects the car's performance, so it is not regarded as resulting in simplicity. 


- Foramechanic, an automatic transmission is a more complex mechanism, and therefore isn't easier to repair or maintain 
than a manual transmission. Unlike the mechanic, the target user is blissfully unaware of this internal complexity. 


While different users regard the automatic transmission differently, it's successful because it eliminates the need 
for unessential knowledge, skill, and effort from its target users. For the typical driver, automatic transmission is a 
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great feature because it just works. 
Simplicity vs. ease of use 


Simplicity, when correctly applied, results in ease of use. But simplicity and ease of use are not the same 
concepts. Ease of use is achieved when users can perform a task successfully on their own without difficulty or 
confusion within a suitable amount of time. There are many ways to achieve ease of use, and simplicity—the 
reduction of the unessential—is just one of them. 


All users, no matter how sophisticated, want to get their work done with a minimum amount of unnecessary 
effort. All users—even advanced users—are primarily motivated to get their work done, not to learn about 
computers or your application. 


Simplicity is the most effective way to achieve ease of use, and ease of use equals use. Complex, hard-to-use 
features just don't get used. By contrast, simple, elegant designs that perform their function well are a joy to use. 
They invoke a positive, emotional response. 


For example, consider the wireless networking support in Microsoft Windows XP. Microsoft could have added a 
wizard to walk users through the configuration process. This approach would have resulted in ease of use but not 
simplicity, because an unessential feature (the wizard) would have been added. Instead, Microsoft designed 
wireless networking to configure itself automatically. Users ultimately don't care about the configuration details, 
so long as it "just works" reliably and securely. This combination of power and simplicity in wireless networking 
technology has led to its popularity and rapid adoption. 


If you do only one thing... 
Start your design process with the simplest designs that do the job well. 


If you're not satisfied with your current design, start by stripping away all the unessential elements. You will find 
that what remains is usually quite good. 


Obtaining simplicity while maintaining power 

Design principles 

To obtain simplicity, always design for the probable, not the possible. 
The possible 


Design decisions based on what's possible lead to complex user interfaces like the Registry Editor, where the 
design assumes that all actions are equally possible and as a result require equal effort. Because anything is 
possible, user goals aren't considered in design decisions. 


The probable 


Design decisions based on the probable lead to simplified, goal- and task-based solutions, where the likely 
scenarios receive focus and require minimal effort to perform. 


The simplicity design principle 


To obtain simplicity, focus on what is likely; reduce, hide, or remove what is unlikely; and eliminate what is 
impossible. 


What users will do is far more relevant to design than what they might do. 


Design techniques 
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To obtain simplicity while maintaining power, choose the right set of features, locate the features in the right 
places, and reduce the effort to use them. This section gives some common techniques to achieve these goals. 


Choosing the right feature set 


"Perfection is achieved, not when there is nothing more to add, 
but when there is nothing left to take away." —Antoine de Saint-Exupery 


The following design techniques give your users the features they need while achieving simplicity through actual 
reduction or removal: 


Determine the features your users need. Understand your users' needs through goal, scenario, and task analysis. Determine 
a set of features that realizes these objectives. 


Remove unnecessary elements. Remove elements that aren't likely to be used or have preferable alternatives. 


Remove unnecessary redundancy. There might be several effective ways to perform a task. To achieve simplicity, make the 
hard decision and choose the best one for your target users instead of providing all of them and making the choice an option. 


Make it "just work" automatically. The element is necessary, but any user interaction to get it to work is not because there 
is an acceptable default behavior or configuration. To achieve simplicity, make it work automatically and either hide it from 
the user completely or reduce its exposure significantly. 


Streamlining the presentation 


"The ability to simplify means to eliminate the unnecessary 
so that the necessary may speak." —Hans Hofmann 


Use the following design techniques to preserve power, while achieving simplicity through the perception of 
reduction or removal: 


Combine what should be combined. Put the essential features that support a task together so that a task can be performed 
in one place. The task's steps should have a unified, streamlined flow. Break down complex tasks into a set of easy, clear 
steps, so that "one" place might consist of several UI surfaces, such as a wizard. 


Separate what should be separated. Not everything can be presented in one place, so always have clear, well-chosen 
boundaries. M ake features that support core scenarios central and obvious, and hide optional functionality or make it 
peripheral. Separate individual tasks and provide links to related tasks. For example, tasks related to manipulating photos 
should be clearly separated from tasks related to managing collections of photos, but they should be readily accessible from 
each other. 


Eliminate what can be eliminated. Take a printout of your design and highlight the elements used to perform the most 
important tasks. Even highlight the individual words in the UI text that communicate useful information. Now review what 
isn't highlighted and consider removing it from the design. If you remove the item, would anything bad happen? If not, 
remove it! 

Consistency, configurability, and generalization are often desirable qualities, but they can lead to unnecessary complexity. 
Review your design for misguided efforts in consistency (such as having redundant text), generalization (such as having any 
number of time zones when two is sufficient), and configurability (such as options that users aren't likely to change), and 
eliminate what can be eliminated. 


Put the elements in the right place. Within a window, an element's location should follow its utility. Essential controls, 
instructions, and explanations should all be in context in logical order. If more options are needed, expose them in context 
by clicking a chevron or similar mechanism; if more information is needed, display an infotip on mouse hover. Place less 
important tasks, options, and Help information outside the main flow in a separate window or page. The technique of 
displaying additional detail as needed is called progressive disclosure. 


Use meaningful high-level combinations. It is often simpler and more scalable to select and manipulate groups of related 
elements than individual elements. Examples of high-level combinations include folders, themes, styles, and user groups. 
Such combinations often map to a user goal or intention that isn't apparent from the individual elements. For example, the 
intention behind the High Contrast Black color scheme is far more apparent than that of a black window background. 


Select the right controls. Design elements are embodied by the controls you use to represent them, so selecting the right 
control is crucial to efficient presentation. For example, the font selection box used by Microsoft Word shows both a preview 
of the font as well as the most recently used fonts. Similarly, the way Word shows potential spelling and grammar errors in 
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place is much simpler than the dialog box alternative, as shown in the beginning of this article. 


Reducing effort 


"Simple things should be simple. 
Complex things should be possible."—Alan Kay 


The following design techniques result in reduced effort for users: 


Make tasks discoverable and visible. All tasks, but especially frequent tasks, should be readily discoverable within the user 
interface. The steps required to perform tasks should be visible and should not rely on memorization. 


Present tasks in the user's domain. Complex software requires users to map their problems to the technology. Simple 
software does that mapping for them by presenting what is natural. For example, a red-eye reduction feature maps directly 
to the problem space and doesn't require users to think in terms of details like hues and gradients. 


Put domain knowledge into the program. Users shouldn't be required to access external information to use your application 
successfully. Domain knowledge can range from complex data and algorithms to simply making it clear what type of input is 
valid. 


Use text that users understand. Well-crafted text is crucial to effective communication with users. Use concepts and terms 
familiar to your users. Fully explain what is being asked in plain language so that users can make intelligent, informed 
decisions. 


Use safe, secure, probable defaults. If a setting has a value that applies to most users in most circumstances, and that 
setting is both safe and secure, use it as the default value. M ake users specify values only when necessary. 


Use constraints. If there are many ways to perform a task, but only some are correct, constrain the task to those correct 
ways. Users should not be allowed to make readily preventable mistakes. 


Simplicity does not mean simplistic 


"Everything should be made as simple as possible, 
but not simpler."—Albert Einstein 


We believe that simplicity is crucial to an effective, desirable user experience—but it is always possible to take a 
good thing too far. The essence of simplicity is the reduction or elimination of the unessential. Removal of the 
essential just produces a poor design. If your "simplification" results in users becoming frustrated, confused, 
unconfident, or unable to complete tasks successfully, you have removed too much. 


Simplicity does mean more effort for you 


"| have only made this letter longer because | have 
not the time to make it shorter."—Blaise Pascal 


Obtaining simplicity while preserving power often requires significant internal complexity. It is usually easier to 
design software that exposes all the technology plumbing than to design one that hides it—the latter requires an 
excellent understanding of your target users and their goals. Removing a feature requires discipline, as does 
deciding against adding that cool feature that really isn't practical. Simplicity requires making hard design choices 
instead of making everything configurable. Complex software often results from a misconception about users: 
that they value unused features or overly complex features they can't understand. 


Powerful and simple 


Power is all about enabling your users and making them productive. Simplicity is all about removing the 
unessential and presenting features the right way. By understanding your target users and achieving the right 
balance of features and presentation, you can design Windows-based applications that do both. 
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Designing with Windows Presentation Foundation 


Follow the UX Guide 
Use Windows Presentation Foundation appropriately 
Guidelines 
Theming 
Software branding 
Custom controls 
3-D 
Animations 
Dynamic behaviors 
Direct manipulation 
Hosting in browser 


Windows Presentation Foundation (WPF) is a user interface development environment that provides access to 
more advanced visuals, such as interfaces that incorporate documents, media, two- and three-dimensional 
graphics, animations, Web-like characteristics, and more. For a general overview, see Introducing Windows 
Presentation Foundation. 


When used appropriately, the WPF in Windows@®can help you create an engaging, productive experience your 
target users will love. If misused, it could lead to programs that are frustrating and difficult to use. The guidelines 
that follow will help you understand the difference, and use this technology appropriately. 


Follow the UX Guide 


While the Windows User Experience Guidelines (or "UX Guide") were written specifically for Windows, nearly all 
of these guidelines apply to programs using WPF as well. However, this shouldn't be a surprise—the primary goal 
of these guidelines is to establish a high-quality, consistent baseline for all Windows-based applications, no 
matter how they are implemented. 


While Windows Presentation Foundation gives you the flexibility to create a broad range of user experiences— 
from traditional Microsoft ®Windows®@to highly customized—you should never feel that using WPF obligates you 
to abandon the Windows look and feel. In fact, WPF gives you the traditional Windows look and feel by default, 
and includes advanced versions of the Aero and Windows XP themes. Regardless of how your program looks, 
your WPF-based program can benefit from powerful capabilities such as a rich application model, dynamic layout, 
and data binding. 


Use Windows Presentation Foundation appropriately 


Among other things, WPF makes it possible to completely change your program's look to match your corporate 
branding, or to use a custom interaction model to give your program a "unique" feel. You can even customize a 
drop-down list to look like a slider! But when are such changes from a traditional experience genuinely 
appropriate? 


What is "cool"? 


WPF offers an exciting set of advanced capabilities. With this step forward comes the desire to create better—or 
"“cooler"—software. All too often these attempts don't seem to hit the mark. To understand why, let's make a 
distinction between what makes a program cool and what doesn't. 


A program really is "cool" when it has: 
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- Features appropriate for the program and its target users. 

- Aesthetically pleasing look and feel, often in a subtle way. 

- Improved usability and flow, without harming performance. 

- A lasting good impression—it's just as enjoyable the 100th time as the first. 


A program fails to be "cool" when it has: 


- Use or abuse of a technology just because it can. 

. Features that detract from usability, flow, or performance. 

- ISin the user's face, constantly drawing unnecessary attention to itself. 

- A fleeting good impression. It might have been fun the first time, but the enjoyment wears off quickly. 


Just as in a painter's palette there are no intrinsically good or bad colors, there aren't intrinsically good or bad 
capabilities in WPF. Rather, for specific programs and their target users, we believe there are appropriate designs 
and inappropriate designs. Truly cool programs use technology because they should, not because they can. 


To achieve coolness, start not by thinking about what the technology can do, but by focusing on what your target 
users really need. Before adding that "cool" feature, make sure there are clear user scenarios that support it. 


Target users 


Designing great software boils down to a series of decisions about what functionality you present to the user and 
how it is presented. For great software, those decisions must be made based on the goals of the software and its 
intended audience. A good design decision must be made for the benefit of the target users—never for yourself, 
or because the platform made it easy. 


To understand your target users, make a list of their knowledge, their goals, and their preferences. You should 
understand their motivation in using your program, how often they will use it, and their work environment. Also, 
consider creating user personas, which are fictitious people designed from real data, intended to represent 
classes of real users. 


Program types 


The type of program you are creating also factors into your decisions. Here are the characteristics of some 
common program types: 


Productivity applications 


- Target users: Knowledge workers. 

- Goals: Productivity, reduce costs. 

. Usage: Used often for long periods of time, possibly all day. 

. User expectation: Familiarity, consistency, immediate productivity. 

- Appropriate use of WPF: Help users get their work done productively. 
- Examples: Microsoft Office, line-of-business applications. 


Consumer applications 


© 2010, Microsoft Corporation. All rights reserved. Page 25 of 882 


- Target users: Consumers. 

- Goals: For users, perform a specific set of tasks. For ISVs, to sell well. 

- Usage: Used occasionally (perhaps weekly) for short periods of time. 

- User expectation: An enjoyable experience that performs targeted tasks well. 
- Appropriate use of WPF: Help users perform tasks; some branding. 

- Examples: Multimedia reference apps, media players and tools, security tools. 


Games 


- Target users: Consumers. 

- Goals: Entertainment. 

. Usage: Used occasionally for moderate periods of time. 

- User expectation: An immersive experience. 

- Appropriate use of WPF: Custom look, possibly custom interaction. 
- Examples: Simple games, online games. 


Kiosks 


- Target users: Walkup users. 

- Goals: Perform a specific task, get information. 

- Usage: Once. 

- User expectation: Perform task immediately, without learning anything. 


- Appropriate use of WPF: Custom look, possibly custom interaction (touch, drag-and-drop), animations for 
visual explanations. 


- Examples: Airport kiosks, museum kiosks. 
IT Pro utilities 


- Target users: Developed and used by IT professionals. 

« Goals: Perform a task or obtain information quickly. 

. Usage: As needed, typically for short periods of time. 

. User expectation: Get the job done. 

- Appropriate use of WPF: Help IT pro develop and test Uls quickly. 


Improving usability 


Some design ideas are good simply because they improve usability. Here are Some common ways to improve 
usability with WPF: 


- Model the real world. You can use custom visuals and interactions to make specific controls look and behave 
like their real-world counterparts. This technique is best used when users are familiar with the real-world 
object, and the real-world approach is the best, most efficient way to perform the task. For example, simple 
utilities like calculators just work better when they model their real-world counterparts. 
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- Show instead of explain. You can use animations and transitions to show relationships, causes, and effects. 
This technique is best used to provide information that would otherwise require text to explain or might be 
missed by users. For example, a book for young children could animate page turns to show how the controls 
work. Normal page turns would be harder for a young child to understand. 


- Improve affordance. Affordance is a property of an object that suggests how the object is used (as opposed 
to using a label to explain it). You can use custom control visuals and animations to suggest how nonstandard 
controls are used. 


- Use natural mapping. Natural mapping is a clear relationship between what the user wants to do and how to 


do it. You can use custom appearances and interactions to create natural mappings when the standard 
common controls won't do. 


- Reduce knowledge. You can use custom interactions to limit the number of ways to perform an operation 
and the amount of knowledge required to perform a task. 


- Improve feedback. You can use custom control visuals and animations to give feedback to show that 
something is being done correctly or incorrectly, or to show progress. For example, the Address bar in 
Windows Internet Explorer ®shows the progress for loading the page in the background. 


- Make objects easier to interact with. Fitts' law states that the effort required to click on a target Is 
proportional to its distance and inversely proportional to its size. For example, you can use animations to 
make objects larger when the pointer is near and smaller when the pointer is far. Doing so makes the objects 
easier to click. It also allows you to use screen space more efficiently, by making objects normally smaller. 


- Focus. You can use rich layout and custom visuals to emphasize screen elements that are crucial to the task, 
and to de-emphasize secondary elements. 


Making decisions 


Now, let's put all these factors together. Should you use that transition effect idea you have for your program? 
Don't start by thinking about the fact that you can do it, or that it's really clever or easy to do. Those factors don't 
matter to your target users. 


Instead, consider the usability of the feature itself. Does the feature benefit from the transition, perhaps because 
it clarifies an object's source or destination? How quick is the transition? Would overall program performance be 
harmed? 


Consider your target users. Do they perform the task only occasionally and do their time constraints make that 
transition annoying? And finally, are such transitions appropriate for your program type? Simple transitions that 
aid in usability are appropriate for nearly all programs, whereas complex animations that don't aid in usability are 
—at best—suitable for programs intended to entertain users, such as games. 


By asking yourself the right questions and giving thoughtful answers, you can use the power of the WPF 
appropriately to create a great user experience. 


The bottom line 


At Microsoft, the four tenets of design are that software should be useful, usable, desirable, and feasible. We 
believe that this is the right list, and that it's in the right order. Appropriately applied, Windows Presentation 
Foundation helps you better satisfy all four of these tenets. 


Guidelines 


Theming 
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As a general rule, application theming is appropriate for programs where the overall experience is more 
important than productivity. Highly themed applications should be immersive, yet only used for short periods of 
time. This rule makes theming suitable for games and kiosk applications, but unsuitable for productivity 
applications. 


However, theming isn't an all-or-nothing deal. You can use customized control visuals for specific controls to give 
them a custom look. For branded consumer applications, you can use simple, subtle application theming to 
create a sense of brand. 


Do: 


- Use the standard Windows theme for productivity applications. 
- Consider using subtle, brand-related application theming for consumer applications. 
- Games and kiosk applications may use heavy application theming to achieve an immersive experience. 


- Theme selectively, subtly, and with restraint. Deciding to use a theme doesn't mean that you have to theme 
everything or make everything appear radically different. 


. If your program models real-world objects, consider using custom visuals to make controls look and behave 
like those real-world objects, but only if that real-world approach offers the best, most efficient way to 
perform tasks. (This is a very high bar.) 


- Consider using theming to emphasize screen elements that are crucial to the task, and de-emphasize 
elements that are secondary. 


- Have professional graphic artists create your themes. Successful themes require an understanding of color, 
focus, contrast, texture, and use of dimension. 


Don't: 


- Don't theme window non-client areas unless the application is an immersive experience, run at full screen 
with no other programs. 


- When in doubt, don't theme. 
Software branding 


In a competitive marketplace, companies brand their products to help differentiate them from the competition. 
However, having your programs look and act weird doesn't make for a strong brand identity. Rather, your goal 
should be to create a program with charactera€”a product that stands out while fitting in. 


Ultimately, users are most impressed by high quality programs that serve their purpose well. They are unlikely to 
be impressed by branding that is distracting, or harms usability or performance. 


Do: 


- Choose good product names and logos, which are the foundation of your brand. Theming isn't. 


- Consider having a link to your product's Web site from its About box and Help file. A product Web site is a far 
more effective way to sell your brand and support your product than branding within the product itself. 


- If you must brand, consider low-impact branding: 
o Small, subtle company or product logos, placed out of workflow. 


o Small, subtle theme color changes that suggest your company or product colors. 
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Don't: 


- Don't use branding that is distracting or harms usability or performance. 


- Don't use custom controls for branding. Rather, use custom controls when necessary to create a special 


immersive experience or when special functionality is needed. 


- Don't use animated splash screens for branding. In fact, don't use any splash screens for programs that load 


quickly. 


- Don't use animated logos. 


- Don't plaster company or product logos on every UI surface. 


o Limit product and company logos to at most two different surfaces, such as the main window or home 
page and the About box. 


o Limit product and company logos to at most twice on any single surface. 
o Limit product and company names to at most three times on any surface. 


For more guidelines and examples, see Branding. 


Custom controls 


The Windows common controls are familiar, consistent, flexible, and accessible. They require no learning from 
experienced Windows users and they are the right choice in almost all situations. 


That said, common controls work best for the usage patterns they were designed for. For example, before the 
Slider control became standard, scroll bars were sometimes used instead. But scroll bars are intended for 
scrolling documents, not choosing from a continuous range of values. Before the standard slider control, it was a 
good idea to use a custom control for this interaction. 


Do: 


- Use custom controls for unusual behaviors that aren't supported by the common controls. 


- Ensure custom controls support system metrics and colors and respect all user changes to these settings. 


- Ensure custom controls conform to the Windows accessibility guidelines. 


Don't: 


- Don't assign nonstandard behaviors to the common controls. Use standard behaviors if you can, and custom 


controls only if you must. 


- Don't underestimate the work required to use custom controls correctly. 


Do: 


- Use 3-D graphics to help users visualize, examine, and interact with three-dimensional objects, charts, and 


graphics. 


- Make sure there are clear user scenarios that support the need for 3-D graphics features. 


Don't: 
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Don't use 3-D graphics just because you can. 


Animations 


There are five basic types of animations: 


Illustration animations communicate information visually instead of verbally. 

Effect animations create interactions to model their real-world counterparts. 

Relationship animations show relationships between objects (where objects come from, went to). 

Transition animations show major UI state changes. 

Feedback animations show that something is being done correctly or incorrectly, or show processing progress. 


The human eye is sensitive to motion, especially peripheral motion. If you use animation to draw attention to 
something, make sure that attention is well deserved and worthy of interrupting the user's train of thought. 


Animations don't have to demand attention to be successful. In fact, many successful animations are so natural 
that users aren't even aware of them. 


Do: 


Illustration animations 


Use illustration animations that have a single interpretation. They have little value if confusing. 
Show one thing at a time to avoid overwhelming users. 


Play at the optimal speed—not so fast they are difficult to understand, but not so slow they are tedious to 
watch. 


Gradually increase the speed of repeated animations. Viewers will already be familiar with the animation, so 
increasing speed slowly will feel right. 


Use timing to emphasize importance, such as slowing down for important parts. 


Effect animations 


Use effect animations for objects that the user is currently interacting with. Such animations aren't distracting 
because the user is already focused on the object. 


Minimize use of effect animations that show status. M ake sure: 
o They have real value by providing additional information users can actually use. Examples include 
transient status changes and emergencies. 


o They are subtle. 
o They are short in duration and therefore not running most of the time. 
o They can be turned off. 


Keep effect animations low-key so they don't draw too much attention to themselves. Avoid movement or 
use small movements, but prefer fades and changes in overlays. 


Relationship animations 


Must start or end with the selected object. Don't show relationships between objects the user isn't currently 
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interacting with. 
- Must complete within a half-second or less. 


Transition animations 


- Use to show relationships between states. Animating state changes makes them easier to understand and 
appear smoother. 


- Make sure transitions have natural mappings. For example, an opening window transition should be upward 
and expand; a closing window transition should be downward and contract. 


- Must complete within a half-second or less. 
Feedback animations 


- Must have clearly identifiable completion and failure states. 
- Must stop showing progress when the underlying process isn't making progress. 


Don't: 


- Don't use animations that affect performance noticeably. Consider performance over slow network 
connections or when many objects are involved. 


- Don't draw attention to things that aren't worthy of attention. 
Dynamic behaviors 


With WPF, you can use progressive disclosure to show or hide additional information. Progressive disclosure 
promotes simplicity by focusing on the essential, yet revealing additional detail as needed. 


Progressive disclosure controls are usually displayed without direct labels that describe their behavior, so users 
must be able to do the following based solely on the control's appearance: 


- Recognize that the control provides progressive disclosure. 

- Determine if the current state is expanded or collapsed. 

- Determine if additional information, options, or commands are needed to perform the task. 
- Determine how to restore the original state, if desired. 


While users can determine the above by trial and error, try to make such experimentation unnecessary. 
Do: 


- Make sure the progressive disclosure mechanism is visible at all times. 


- Use the appropriate glyph. Use double or single chevrons for surfaces that slide open to show the remaining 
items in hidden content. 


- Point the glyph in the right direction. Chevrons point in the direction where the action will occur. 
Don't: 


- Don't depend upon mouse hover effects to reveal progressive disclosure. 
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Direct manipulation 


With WPF, you can use direct manipulation to let users interact directly with objects using their mouse, instead 
of indirectly with the keyboard, dialog boxes, or menus. 


Direct manipulation is a natural way to perform many tasks. It is easy to learn, and convenient to use. But there 
are many challenges, the most important being to prevent accidental manipulation of important data. 


Do: 


« Make direct manipulation visible by: 
o Changing the pointer to a hand on mouseover. 


o Showing drag handles on object selection. 


o Showing movement when an object is dragged, then show appropriate drop targets. Also, clearly 
show when an object is successfully dropped or when the drop is cancelled. 


o Showing an in-place text box on double selection for renaming. 
o Showing most useful properties with tooltips. 


- Prevent accidental manipulation by: 
o Locking by default objects that are crucial or likely to be manipulated accidentally. Provide a way to 
unlock in the object's context menu. 


o Providing an obvious way to undo accidental manipulations. 
- Make direct manipulation accessible by always providing alternatives. 


Don't: 


- Don't overuse direct manipulation by providing it where there is very little value. Overuse can lead to a UI so 
fragile that users are reluctant to interact with it. 


Hosting in browser 
You have the option of hosting your WPF-based program in a browser. 
Do: 
- Host your program in the browser to navigate from a Web page to your program. 
Don't: 


- Don't host your program in the browser when: 
o It is used to edit rich content (for example, a word processor). 


o It requires multiple windows. 


o It isa background task that would be broken or interrupted if users were to navigate away (for 
example, a media player). 
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Controls 


Here are visual examples of controls in Windows® Click each image to go to the guidelines article for a particular 


control. 


Enter PIN 


A, Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 


You should press Caps Lock to turn it off before entering your password. 


Balloons inform users of a non-critical problem or special condition in a control. 


[¥] Clock 
[| Volume 
[| Network 


[| Power 


Check boxes allow users to make a decision between two or more clearly differing choices. 


a 


Command buttons allow users to perform an immediate action. 


> Browse the Internet now 


> Set up a new connection anyway 


Command links allow users to make a choice among a set of mutually exclusive, related choices. 


© 2010, Microsoft Corporation. All rights reserved. 


Page 33 of 882 


Drop-down lists and combo boxes allow users to make a choice among a list of mutually exclusive values. 


Privacy 
Store and display a list of recently opened files 
Store and display a list of recently opened programs 


Group boxes allow users to see relationships among a Set of related controls. 


Check for updates 


Links allow users to navigate to another page, window, or Help topic; display a definition; initiate a command; or 
choose an option. 


List of valid modes: 


1680 by 1050, True Color (32 bit), 60 Hertz 
1680 by 1050, High Color (16 bit), 60 Hertz 
1680 by 1050, 256 Colors, 60 Hertz 

1280 by 1024, True Color (32 bit), 60 Hertz 


1280 by 1024, High Color (16 bit), 60 Hertz 
1280 by 1024, 256 Colors, 60 Hertz 
1280 by 800, True Color (32 bit), 60 Hertz 
1280 by 800, High Color (16 bit), 60 Hertz 
1280 by 800, 256 Colors, 60 Hertz 


List boxes allow users to select from a set of values presented in a list that is always visible. With a single-selection 
list box, users select one item from a list of mutually exclusive values. With a multiple-selection list box, users 
select zero or more items from a list of values. 
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Date taken 
Autumn Leaves 
Creek 

Desert Landscape 
Dock 

Forest 

Forest Flowers 


WW 


RA nee 


Frangipani Flowers 


List views allow users to view and interact with a collection of data objects, using either single selection or 
multiple selection. 


Found Windows Media Center Extender 


~~ Click here for more information. 


Notifications inform users of events that are unrelated to the current user activity. 


from Pictures (D:\User...\Pictures) to Pictures (D:\User...\Pictures) 
Calculating time remaining... 


2 | 


Progress bars allow users to follow the progress of a lengthy operation. 


« 
> 


ap 78 8 (=) () (¢) » > 


Progressive disclosure controls allow users to show or hide additional information including data, options, or 
commands. 


@ Display as a link 
© Display as a menu 
© Don't display this item 


Radio buttons allow users to make a choice among a set of mutually exclusive, related choices. 
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co) mS 
| +> | Search p 


#2 Map network drive » (2) 


Search boxes provide users a way to locate specific objects or text quickly. 


\] 


Sliders allow users to choose from a continuous range of values. 


8 


Spin controls allow users to change incrementally the value within its associated numeric text box. 


Download Full Items 
Download Headers and then Full Items 
¥_ Download Headers 


¥ On Slow Connections Only Download Headers 


Work Offline 


Updating Inbox (257 KB). |  & | i] Connected to Microsoft Exchange * 


Status bars display information about the state of the current window, background tasks, or other contextual 
information. 


=—— Pointer Options 


Tabs present users with related information on separate labeled pages. 


© 2010, Microsoft Corporation. All rights reserved. Page 36 of 882 


Display name: 


Text boxes allow users to display, enter, or edit a text or numeric value. 


Print (Ctrl+P) 


Tooltips label an unlabeled control. 


iz Share the selected files and folders 
with other people on the network. 


Infotips describe an object to which the user is pointing. 


4 WD Desktop 
D Jonathan 
> )) Public 
4% Computer 
> €@ Local Disk (C:) 
> && New Volume (D:) 
> @&3 DVD Drive (F:) 
& My Sharing Folders 
> & Network 
D Control Panel 
‘& Recycle Bin 
New Folder 


Tree views allow users to view and interact with a hierarchically arranged collection of objects, using either single 
selection or multiple selection. 
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Balloons 


Is this the right control? 
Usage patterns 
Guidelines 
When to display 
How long to display 
How to display 
Password and PIN text boxes 
Other text boxes 
Interaction 
Icons 
Accessibility 
Text 
Documentation 


A balloon is a small pop-up window that informs users of anon-critical problem or special condition in a control. 


— Owner control 


Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 


Password: 


Tail 
Title 


Body text 


A typical balloon. 


Balloons have an icon, a title, and body text, all of which are optional. Unlike tooltips and infotips, balloons also 
have a tail that identifies their source. Usually the source is a control—if so, it is referred to as the owner control. 


While balloons inform users of non-critical problems, they don't prevent problems—although the owner control 
might. Any unhandled problems must be handled by the owner user interface (UI) when users attempt to commit 


to the action. 


Balloons are usually used with text boxes, or controls that use text boxes for changing values, such as combo 
boxes, list views, and tree views. Other kinds of controls are sufficiently well constrained, and don't need the 
additional feedback balloons afford. Furthermore, if there is a problem with other types of controls, it often 
involves inconsistency between multiple controls—a situation for which balloons aren't suitable. Only text-entry 
controls are both unconstrained and a common source of single-point errors. 


A notification is a specific type of balloon displayed by a notification area icon. 


Note: Guidelines related to notifications, tooltips and infotips, and error messages are presented in separate 


articles. 


Press Caps Lock to turn it off before entering your password. 


Is this the right control? 


To decide, consider these questions: 


- Does the information describe a problem or special condition? If not, use another control. Don't use balloons to display supplemental 


information for a control; consider using static text, infotips, progressive disclosure, or prompts instead. 


- Can the problem or special condition be detected immediately—either on input or when the owner control loses input focus? If 


not, use an error message displayed in a task dialog or message box. 


- For problems, is the problem critical? If so, use an error message displayed in a task dialog or message box. Such error 
messages require interaction (which is suitable for critical errors), whereas balloons don't. 
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- For special conditions, is the condition valid yet likely to be unintended? If so, balloons are appropriate. For conditions not valid, it 
is better to prevent them in the first place. For likely intended conditions, there is no need to do anything. 


- Can the problem or special condition be expressed concisely? If not, use another control. Balloons can't have detailed explanations 
or provide supplemental information. 


- Does the information describe the control currently being hovered over? If so, use a tip instead, unless users may need to interact 
with the message. 


- Isthe information related to the user's current activity? If not, consider using a notification or dialog box instead. Users are likely 
to overlook balloons outside the current activity, and, by default, balloons time out after 10 seconds. 


- Does the information come from a single, specific source? If a problem or condition has multiple sources or no specific source, use 
an in-place message or a dialog box instead. 


Incorrect: 


Connect to Jonathan 


Connecting to Jonathan 


User name: © Robert ’ 


Password: eeccccece 


Remember my password / 


[x] Logon unsuccessful: 
Windows is unable to log you on. 


Be sure that your user name and 
[ox password are correct. 


In this example, the problem could be with the user name or the password, but reporting the problem with a 
balloon visually suggests that only the password is the problem. Consequently, the feedback from entering an 
incorrect user name is misleading. 


Balloons are an alternative to infotips, dialog boxes, and in-place messages. In contrast to tooltips and infotips: 


- Balloons can be displayed independently of the current pointer location, so they have a tail that indicates their source. 
- Balloons have a title, body text, and an icon. 
- Balloons can be interactive, whereas it is impossible to click ona tip. 


In contrast to modal dialog boxes: 


- Balloons don't steal input focus or require interaction. 
- Balloons identify a single, specific source. M odal dialogs can have multiple sources, or no specific source at all. 


In contrast to in-place messages: 


- Balloons are more noticeable. 
- Balloons don't require available screen space or the dynamic layout that is required to display in-place messages. 
- Balloons remove themselves automatically after a timeout. 


Usage patterns 


Balloons have these usage patterns: 
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Input problem —_ Using balloons for error messages doesn't steal input focus, yet is still very noticeable if the owner control has 


A non-critical input focus. To correct the problem, the user may have to change or reenter the input; but if the owner control 
user input ignores incorrect input, the user may not have to make any changes at all. Because the problem isn't critical, no 
problem coming error icon is necessary. 

from asingle 

owner control, 

usually a text Enter PIN 

box. 


al 


Incorrect character Windows 
Anumber is the only valid character here. 


A balloon used to report a non-critical user input problem. 


Special condition Use balloons to prevent frustration by alerting users of special conditions as soon as they happen (for example, 
The owner exceeding maximum input size or setting Caps Lock on by mistake). It is important to give such feedback without 
control isin a stealing input focus or forcing interaction because these conditions might be intentional. These balloons are 
state that affects especially important for password and PIN boxes, where users are otherwise working with minimal feedback. 
input. This state These balloons have a warning icon. 


is likely 
unintended and 
the user may not Enter PIN 
realize input is 
affected. a . 
A Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 
Press Caps Lock to turn it off before entering your password. 
A balloon used to report a special condition. 
Guidelines 


When to display 


- Display the balloon as soon as the problem or special condition is detected, even if repeatedly, without any noticeable delay. 
o For problems involving individual characters or the maximum input size, display the balloon immediately on input. 


o For problems involving the input value (including requiring a non-blank value), display the balloon when the owner control loses 
input focus. Otherwise, displaying balloons while users are entering potentially valid input can be distracting and annoying. 


- Display only one balloon at a time. Displaying multiple balloons can be overwhelming. If a single event results in multiple problems, 
either present all the problems at once or report only the most important problem. 


Incorrect: 


Incorrect character 
Anumber is the only valid character here. 


A Caps Lock is on 


Having Caps Lock on may cause you to enter your password incorrectly. 


Press Caps Lock to turn it off before entering your password. 
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In this example, two problems are incorrectly presented at the same time. 
How long to display 


- Remove a balloon when: 
o The problem is resolved or special condition is removed. 


o The user enters valid data (for input problems). 


o The balloon times out. By default balloons remove themselves after 10 seconds, although users can change this by modifying the 
SPI_MESSAGEDURATION system parameter. 


- Remove the timeout if users can't continue until the problem is resolved. Developers: In Win32, you can set the display time with the 
TTM _SETDELAYTIM E message. 


How to display 


- Display balloons below their owner control. Doing so allows users to view the context, including the owner control and its 
label. Microsoft ®W indows®automatically adjusts balloon positions so that they are completely on screen. The default behavior is 
to display a balloon above its owner control, as done with notifications. 


Correct: 


New password: | 


A Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 


Confirm new password: 


Press Caps Lock to turn it off before entering your password. 


Incorrect: 


A Caps Lock is on 


Having Caps Lock on may cause you to enter your password incorrectly. 


Press Caps Lock to turn it off before entering your password. 
New password: | d 


Confirm new password: 


In the incorrect example, the balloon is awkwardly displayed above its owner control. 
Password and PIN text boxes 


- Use a balloon to indicate that Caps Lock is on, using the text in the following example: 
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Credential type 
A Windows logon cre A Caps Lock is on 
hoose this option to Having Caps Lock on may cause you to enter your PIN incorrectly 


Hows server 


Press Caps Lock to turn it off before entering your PIN. 


@) A Web site or progran 


e this optior 


In this example, a balloon indicates that Caps Lock is on in a PIN text box. 


- Use a balloon to indicate when users attempt to exceed the maximum input size. Reaching the maximum input size is much less 
obvious in password and PIN text boxes than ordinary text boxes. 


The PIN code may not have more than 4 digits 


In this example, a balloon indicates that the user is attempting to exceed the maximum input size. 


- Use a balloon to indicate when users input incorrect characters. However, it is better not to have such restrictions because they reduce 
the security of the password or PIN. To prevent information disclosure, the balloon should mention only documented facts about 


valid passwords or PINs. 


Only numbers are accepted for your PIN code 
Please select a 4 digit number only PIN code and try again. 


In this example, a balloon indicates that the PIN requires numbers. 


Other text boxes 


- Consider using a balloon to indicate when users attempt to exceed the maximum input size for critical, short text boxes aimed 
at novice users. Examples include user names and account names. Text boxes beep when users attempt to exceed the maximum input, 
but novice users might not understand the meaning of the beep. 


Computer description: Jonathan — | 
For example: "Kit | ae 
Computer". The computer name can be at most 14 characters 


Full computer name: JONATHAN. mi 


Domain: microsoft.com 
In this example, a balloon indicates that the user attempted to exceed the maximum input size. 


Interaction 


« When users click a balloon, just dismiss the balloon without displaying any other UI or having any other side effect. 
Unlike notifications, balloons shouldn't have close buttons. 


Icons 
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Choose the icon based on the usage pattern: 


Pattern Icon 
Input problem No icon. Not using an error icon here is consistent with the Windows tone guidelines. 


|Special condition [The standard 16x16 pixel warning icon. 


Accessibility 


When used properly, balloons enhance accessibility. For balloons to be accessible: 


Only display balloons that relate to the user's current activity. 


- Keep the balloon text concise. Doing so makes the balloon text easier to read for users with low vision, and minimizes the 


Text 


interruption when read by screen readers. 
Redisplay the balloon whenever the problem or condition recurs. 


Title text 


Use title text that briefly summarizes the input problem or special condition in clear, plain, concise, specific language. Users should be 
able to understand the purpose of the balloon quickly and with minimal effort. 


Use text fragments or complete sentences without ending punctuation. 
Use sentence-style capitalization. 


Use no more than 48 characters (in English) to accommodate localization. The title has a maximum length of 63 characters and 
must be able to expand by at least 30 percent to accommodate localization. 


Body text 


Use the first sentence of the body text to state the problem or condition in a way that is clearly relevant to the user. Don't repeat the 
information in the title. Omit this if there is nothing more to add. 


Use the second sentence to state what the user can do to resolve the problem or revert the state. In accordance with the Style 
and Tone guidelines, there's no need to use the word Please in this statement. Put two line breaks between the first and second 
sentences. 


A The title briefly summarizes the input problem or special condition in clear, plain, 
concise, specific language 
The first sentence states the problem or condition. but omit this if there is nothing more to add. 


The second sentence states what the user can do to resolve the problem or revert the state. but omit if there is 
nothing for the user to do. 


This example shows the standard balloon text layout. 


Explain how to resolve the problem or revert the state even if that explanation is obvious, but omit redundancy between the 
problem statement and its resolution. Exceptions: 
o Omit the resolution if it can't be expressed concisely or without significant redundancy. 


o Omit the resolution if there is nothing for the user to do, such as when incorrect characters are ignored. 
Use complete sentences with ending punctuation. 
Use sentence-style capitalization. 


Use no more than 200 characters (in English) to accommodate localization. The body text has a maximum length of 255 characters and 
must be able to expand by at least 30 percent to accommodate localization. 
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Documentation 
When referring to balloons: 


- Use the exact title text, including its capitalization. 
- Refer to the component as a balloon, not as a notification or an alert. 
- When possible, format the title text using bold text. Otherwise, put the title in quotation marks only if required to prevent confusion. 
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Check Boxes 


Is this the right control? 
Usage patterns 
Guidelines 
General 
Don't show this <item> again 
Subordinate controls 
Default values 
Recommended sizing and spacing 


Labels 


Documentation 


With a check box, users make a decision between two clearly opposite choices. The check box label indicates the 
selected state, whereas the meaning of the cleared state must be the unambiguous opposite of the selected 
state. Consequently, check boxes should be used only to toggle an option on or off or to select or deselect an 


item. 


(¥] Clock 
Volume 
[| Network 


A typical group of check boxes. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 


To decide, consider these questions: 


Is the check box used to toggle an option on or off or to select or deselect an item? If not, use another control. 


Are the selected and cleared states clear and unambiguous opposites? If not, use radio buttons or a drop-down list so that you 
can label the states independently. 


When used in a group, does the group comprise independent choices, from which users may choose zero or more? If not, 
consider controls for dependent choices, such as radio buttons and check box tree views. 


When used in a group, does the group comprise dependent choices, from which users must choose one or more? If so, use a 
group of check boxes and handle the error when none of the options are selected. 


Is the number of options in a group 10 or fewer? Since the screen space used is proportional to the number of options, keep the 
number of check boxes to 10 or fewer. For more than 10 options, use a check box list. 


Would a radio button be a better choice? Where check boxes are suitable only for turning an option on or off, radio buttons can 
be used for completely different options. If both solutions are possible: 
o Use radio buttons if the meaning of the cleared check box isn't completely obvious. 


Incorrect: 
("| Landscape 
In this example, the opposite choice from Landscape isn't clear, so the check box isn't a good choice. 


Correct: 
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@ Landscape 
© Portrait 


In this example, the choices are not opposites so radio buttons are the better choice. 


o Use radio buttons on wizard pages to make the alternatives clear, even if a check box is otherwise acceptable. 


o Use radio buttons if you have enough screen space and the options are important enough to be a good use of that screen 
space. Otherwise, use a check box or a drop-down list. 


Incorrect: 


9) Show this again 
© Don't show this again 


In this example, the options aren't important enough to use radio buttons. 


Correct: 


("| Don't show this message again 


In this example, a check box is an efficient use of screen space for this peripheral option. 


o Use a check box if there other check boxes on the window. 


- Does the option present a program option, rather than data? The option's values shouldn't be based on context or other data. 
For data, use a check box list or multiple-selection list. 


Usage patterns 


Check boxes have several usage patterns: 


An individual : 5 
choice (¥] Remind me one week before this change occurs 
A single check 


boxisusedto —_ cingle check box is used for an individual choice. 


select an 

individual 

choice. 

Independent Unlike single-selection controls such as radio buttons, users can select any combination of options in a group of 
choices (zero or check boxes. 

more) 

A group of check ? 

boxes is used to Poesy 

select from a set [Ignore colors specified on webpages 

ie om (¥| Ignore font styles specified on webpages 


(¥| Ignore font sizes specified on webpages 


A group of check boxes is used for independent choices. 
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Dependent 


choices (one or 


more) 


You may need to represent a selection of one or more dependent choices. Because Microsoft ®Windows® 


doesn't have a control that directly supports this type of input, the best solution is to use a group of check boxes 


and handle the error when none of the options are selected. 


A group of check 
boxes can also 

be used to select Protocols (select one or more): 
fromasetofone {¥|TCP 
ormore choices. =, UDP 


Mixed choice 
In addition to 
their selected 
and cleared 

states, check 


A group of check boxes is used where at least one protocol must be selected. 


Attributes: (fl Read-only 


A mixed-state check box. 


boxes also have 


a mixed state 
multiple 
selection to 


for 


indicate that the 
option is set for 
some, but not 


all, objects. 


Guidelines 


General 


- Group related check boxes. Combine related options and separate unrelated options into groups of 10 or fewer, using multiple 
groups if necessary. 


Pagination 


Iv) 


Widow/Orphan control 
Keep lines together 


Suppress line numbers 


Don't hyphenate 


("| Keep with next 
|") Page break before 


An example of groups of related, independent options. 


- Reconsider using group boxes to organize groups of check boxes—this often results in unnecessary screen clutter. 


- List check boxes in a logical order, such as grouping highly related options together or placing most common options first, or 
following some other natural progression. Alphabetical ordering isn't recommended because it is language dependent, and 
therefore not localizable. 


- Align check boxes vertically, not horizontally. Horizontal alignment is harder to read. 


Correct: 


("| Use large icons 


(¥] Show shadows under menus 


(¥| Show window contents while dragging 


In this example, the check boxes are correctly aligned. 
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Incorrect: 
Formatting 


("| Use large icons (¥| Show shadows under menus (¥| Show window contents while dragging 


In this example, the horizontal alignment is harder to read. 


Don't use the mixed state to represent a third state. The mixed state is used to indicate that an option is set for some, but not all, 
child objects. Users shouldn't be able to set a mixed state directly—rather the mixed state is a reflection of the child objects. The 


mixed state isn't used as a third state for an individual item. To represent a third state, use radio buttons or a drop-down list 
instead. 


Incorrect: 


(| Theme service 


In this example, the mixed state is supposed to indicate that the Theme service isn't installed. 


Correct: 


Theme service: 


Not installed \y] 


Enabled 
Disabled 
ace 


In this example, users can choose from a list of three clear options. 


Clicking a mixed state check box should cycle through all selected, all cleared, and the original mixed states. For forgiveness, it's 
important to be able to restore the original mixed state because the settings might be complex or unknown to the user. 
Otherwise, the only way to restore the mixed state with confidence would be to cancel the task and start over. 


Don't use check boxes as a progress indicator. Use a progress indicator control instead. 


Incorrect: 
Removing program... 


Shutting down program 


gq 8 


Removing program files 


| Removing registry settings 


| Removing desktop and Start menu items 


In this example, check boxes are used incorrectly as a progress indicator. 


Correct: 
Removing program... 


— —_— 


Example of a typical progress bar. 


Show disabled check boxes using the correct selection state. Even though users can't change them, disabled check boxes convey 
information so they should be consistent with results. 


Incorrect: 
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Windows can read and highlight this list of tools automatically. Press the spacebar to select the 
highlighted option. 


[¥] Always read this section aloud \¥| Always scan and highlight each option 


In this example, the "Always read this section aloud" option should be cleared because the section isn't read when 
the option is disabled. 


- Don't use the selection of a check box to: 
o Perform commands. 


o Display other windows, such as a dialog box to gather more input. 
o Dynamically display other controls related to the selected control (screen readers cannot detect such events). 


Don't show this <item> again 


- Consider using a Don't show this <item> again option to allow users to suppress a recurring dialog box only if there isn't a 
better alternative. Try to determine beforehand if users really need the dialog; if they do, always show the dialog, and if they 
don't, eliminate the dialog. 


For more guidelines and examples, see Dialog Boxes. 
Subordinate controls 


- Place subordinate controls to the right of or below (indented, flush with the check box label) the check box and its label. End the 
check box label with a colon. 


[Use the following method to smooth edges of screen fonts: 
ClearType 
In this example, the check box and its subordinate control share the check box label and its access key. 
- Leave dependent editable text boxes and drop-down lists enabled if they share the check box's label. When users type or paste 


anything into the box, select the corresponding option automatically. Doing so simplifies the interaction. 


Header and footer 
Header and footer 


¥\Useaheader: Check boxes 


"] Use a footer: 


Preview 


[ Type the document title ] 


In this example, entering a header or footer automatically selects the option. 


- If you nest check boxes with radio buttons or other check boxes, disable these subordinate controls until the high-level option is 
selected. Doing so avoids confusion about the meaning of the subordinate controls. 


- Make subordinate controls to a check box contiguous with the check box in the tab order. 
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- If selecting an option implies selecting subordinate check boxes, explicitly select those check boxes to make the relationship 
clear. 


Incorrect: 
Filter web content 


Choose a web restriction level 
@) Highest restriction - Only websites on the Allowed websites list 
© High restriction - Kids websites only 

») Medium Restriction 


») Low Restriction 
© Custom 


Check the content you want to block 


How do these categories work? 


Alcohol 


Bomb making 


Pornography 


Sex education 


Drugs Tobacco 
Sambling Neapons 
Hate speech Web e-mail 


Mature content Web chat 


In this example, the subordinate check boxes aren't selected. 


Correct: 
Filter web content 


Choose a web restriction level 
@) Highest restriction - Only websites on the Allowed websites list 
© High restriction - Kids websites only 
© Medium Restriction 
© Low Restriction 
© Custom 


Check the content you want to block 


How do these categories work? 


Alcohol Pornography 
Bomb making Sex education 
Drugs Tobacco 
Gambling Veapon 
Hate speech Web e-mail 


Mature content Web chat 


In this example, the subordinate check boxes are selected, making their relationship to the selected option clear. 


. Use dependent check boxes if the alternatives add unnecessary complexity. While check boxes should be independent options, 
sometimes alternatives such as radio buttons add unnecessary complexity. 


Correct: 


© 2010, Microsoft Corporation. All rights reserved. Page 50 of 882 


Effects 


(@ No strikethrough ® No effect 

© Strikethrough ») Shadow or outline 

(© Double strikethrough Shadow 
Outline 

(@ No super or subscript (© Emboss 

(© Superscript © Engrave 

(© Subscript 


In this example, the use of radio buttons is accurate, but creates unnecessary complexity. 


Better: 
Effects 
¥} Strikethrough ¥| Shadow 
Double strikethrough Outline 
Superscript Emboss 
Subscript | Engrave 


In this example, the use of check boxes is simpler and allows users to focus on selecting the desired options 
instead of on their complex relationship. 


Important: Apply this guideline only in extremely rare circumstances, when showing the dependencies adds significant 
complexity without adding clarity. In the previous example, it is unlikely that users would attempt to choose both superscript and 
subscript, and if they did, it would be easy to understand that they were exclusive options. 


Default values 


- If acheck box is for a user option, set the safest (to prevent loss of data or system access), most secure and private state by 
default. If safety and security aren't factors, select the most likely or convenient value. 


Recommended sizing and spacing 


3 DLUs (5 pixels) =:-25:::-:: 
4 DLUs (7 pixels) =; 
sa [" Unselected option 
("] Check1 Tt 10 DLUs (17 pixels) 


Recommended sizing and spacing for check boxes. 
Labels 
Check box labels 


- Label every check box. 
- Assign a unique access key to each label. For guidelines, see Keyboard. 
- Use sentence-style capitalization. 


- Write the label as a phrase or an imperative sentence, and use no ending punctuation. 
o Exception: If a check box label also labels a subordinate control that follows it, end the label with a colon. 


- Write the label so that it describes the selected state of the check box. 
- Fora group of check boxes, use parallel phrasing and try to keep the length about the same for all labels. 


© 2010, Microsoft Corporation. All rights reserved. Page 51 of 882 


- Fora group of check boxes, focus the label text on the differences among the options. If all the options have the same 
introductory text, move that text to the group label. 


Use positive phrasing. Don't phrase a label so that selecting a check box means not to perform an action. 
o Exception: Don't show this <item> again check boxes. 


Incorrect: 
[| Turn off System Restore on all drives 
In this example, the option doesn't use positive phrasing. 


Describe just the option with the label. Keep labels brief so it's easy to refer to them in messages and documentation. If the option 
requires further explanation, provide the explanation in a static text control using complete sentences and ending punctuation. 


Note: Adding an explanation to one check box in a group doesn't mean that you have to provide explanations for 
all check boxes in the group. Provide the relevant information in the label if you can, and use explanations only 
when necessary. Don't merely restate the label for consistency. 


(¥| Hide modes that this monitor cannot display 


Clearing this check box allows you to select display modes that this 
monitor cannot display correctly. This may lead to an unusable display 
or damaged hardware. 


In this example, a check box label has additional explanatory text beneath it. 


If an option is strongly recommended, consider adding "(recommended)" to the label. Be sure to add to the control label, not the 
supplemental notes. 


If you must use multi-line labels, align the top of the label with the check box. 


Don't use a subordinate control, the values it contains, or its units label to create a sentence or phrase. Such a design isn't 
localizable because sentence structure varies with language. 


Incorrect: 


(¥) Create 2 computer account in the domain 


In this example, the text box is incorrectly placed inside the check box label. 
Check box group labels 


Use the group label to explain the purpose of the group, not how to make the selection. Assume that users know how to use check 
boxes. For example, don't say "Select any of the following choices". 


End each label with a colon. 


Don't assign an access Key to the label. Doing so isn't necessary and it makes the other access keys harder to assign. 


For a selection of one or more dependent choices, explain the requirement on the label. 


Correct: 
Protocols: 

¥| TCP 

UDP 


In this example, users might think that they can only make one selection. 


Better: 
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Protocols (select one or more): 
¥| TCP 
fh] UDP 


In this example, it's clear that users can make more than one selection. 


Documentation 
When referring to check boxes: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or colon. Include the word check 
box. 


- Refer to a check box as a check box, not option, checkbox, or just box, because box alone is ambiguous for localizers. 
- To describe user interaction, use select and clear. 
- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Example: Select the Underline check box. 
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Command Buttons 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
General 
Split buttons 
Default values 
Recommended sizing and spacing 
Labels 
Documentation 


With a command button, users initiate an immediate action. 
Lo | 
A typical command button. 


The default command button is invoked when users press the Enter key. It is assigned by the developer, but any 
command button becomes the default when users tab to it. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 
To decide, consider these questions: 


- Isthe command button used to initiate an immediate action? If not, use another control. 


- Would a link be a better choice? Use a link if: 
o The action is to navigate to another page, window, or Help topic. 
Exception: Wizard navigation uses Back and Next command buttons. 


o The command is embedded in a body of text. 


o The command is secondary in nature. That is, it does not relate to the primary purpose of the window. In this case, either a 
lightweight command button or link would be appropriate. 


o The command is part of a menu or group of related links. 
o The label is lengthy, consisting of five or more words, thus giving a command button an awkward appearance. 


- Would a combination of radio buttons and generic command buttons be a better choice? Often radio buttons are used in 
conjunction with generic command buttons (OK, Cancel) in place of a set of specific command buttons when any of the following 
are true: 

o There are five or more possible actions. 


o Users need to view additional information before making a decision. 
o Users need to interact with the choices (perhaps to see additional information) before making a decision. 
o Users view the choices as options instead of different commands. 


Correct: 
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@ Windows Firewall Settings 


—- 


Windows Firewall can help prevent hackers or malicious software from gaining 
access to your computer through the Internet or a network. 


Y] (@ On (recommended) 
This setting blocks all outside sources from connecting to this 
computer, except for those unblocked on the Exceptions tab. 
rx © Off (not recommended) 


Avoid using this setting. Turning off Windows Firewall will make this 
computer more vulnerable to hackers or malicious software. 


Tell me more about these settings 


Cox J [_concet_] 


In this example, radio buttons are combined with OK and Cancel buttons to provide additional information about 
the options. 


Incorrect: 


@ Windows Firewall Settings 


Windows Firewall can help prevent hackers or malicious software from gaining 
access to your computer through the Internet or a network. 


es 


In this example, command buttons alone make it difficult for users to make an informed decision. 


Note: For a detailed comparison, review Command Buttons vs. Links. 


Design concepts 
Using ellipses 


While command buttons are used for immediate actions, more information might be needed to perform the 
action. Indicate a command that needs additional information (including confirmation) by adding an ellipsis at 
the end of the button label. 


In this example, the Print... command displays a Print dialog box to gather more information. 


By contrast, in this example the Print command prints a single copy of a document to the default printer without 
any further user interaction. 
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Proper use of ellipses is important to indicate that users can make further choices before performing the 
action, or even cancel the action entirely. The visual cue offered by an ellipsis allows users to explore your 
software without fear. 


This doesn't mean you should use an ellipsis whenever an action displays another window—only when 
additional information is required to perform the action. Consequently, any command button whose implicit 
verb is to "show another window" doesn't take an ellipsis, such as with the commands About, Advanced, Help 
(or any other command linking to a Help topic), Options, Properties, or Settings. 


Generally, ellipses are used in user interfaces to indicate incompleteness. Commands that show other windows 
aren't incomplete—they must display another window and additional information isn't needed to perform their 
action. This approach eliminates screen clutter in situations where ellipses have little value. 


Note: When determining if a command button needs an ellipsis, don't use the need to elevate privileges as a 
factor. Elevation isn't information needed to perform a command (rather, it's for permission) and the need to 
elevate is indicated with the security shield. 


If you do only one thing... 
Use a concise, specific, self-explanatory label that clearly describes the action that the command button 
performs, and use an ellipsis when appropriate. 


Usage patterns 


Command buttons have several usage patterns: 


Standard command 


buttons 

You can use standard 
command buttons to 
initiate an immediate 
action. 


A standard command button. 


Default command buttons 
The default command 


button in a window 
indicates the command 
button that will be 


A default command button. 


activated when users press Any command button becomes the default when users tab to it. If the input focus is on a control that isn't a 
the Enter key. command button, the command button with the default button attribute becomes the default. Only one 


command button in a window can be the default. 
Lightweight command 


buttons i! Print... | = Pritt | 
A lightweight command 
button is similar to a 


standard command button, In this example, the command has a very lightweight appearance (similar to a link) until the user hovers over the 


except its button frame is command, at which point it is drawn with a button frame. 
shown only on mouse 


hover. 


You can use lightweight command buttons in situations where you would use a standard command button, but 


you want to avoid always showing the button frame. Lightweight command buttons are ideal for commands that 


you want to underemphasize and using a link wouldn't be appropriate. 


Menu buttons 
Use a menu button when 
Font... 


you need a menu for a 


small set of related Paragraph... 
commands. 
Tabs... 
Language... 
Frame... 
Style... 


Highlight 
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A menu button with a small set of related commands. 


Use a menu button when a menu bar is undesirable, such as in a dialog box, toolbar, or other window that 
doesn't have a menu bar. A single downward-pointing triangle indicates that clicking the button will drop down a 
menu. 


Split buttons | Open \y| 
Use a split button to ee 
consolidate a set of 

variations of a command, 


especially whenoneofthe _ a 
commandsis used most of Like amenu button, a single downward-pointing triangle indicates that clicking the rightmost portion of the 


the time. button will drop down a menu. 


A collapsed split button. 


Ipen in browser 
Open with transform 


Open and repair 


Show previous versions 


A dropped-down split button. 


In this example, a split button is used to consolidate six variations of the Open command. The regular Open 
command is used most of the time, so users normally don't need to see the other commands. Using a split button 
saves a significant amount of screen space, while also providing powerful choices. 


Unlike a menu button, clicking the left portion of the button performs the action on the label directly. Split 
buttons are effective in situations where the next action with a specific tool is likely to be the same as the last 
action. In this case, the label is changed to the last action, as with a color picker: 


J 
a2 ¥ 
In this example, the label is changed to the last action. 


Browse buttons Dialog boxes launched by a Browse button help users select files, folders, computers, users, colors, and so on. 
Use a browse button to They are typically combined with an unconstrained control such as a text box. They're usually labeled Browse, 
display a dialog box to help Other, or More, and always have an ellipsis to indicate that more information is required. 


users select a valid value. 
Fle name: 


A text box with a Browse button. 


For windows that have many Browse buttons, you can use a short version: 


] 


A short browse button. 
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Progressive disclosure 
buttons 


Use a progressive 


disclosure button to show 
or hide infrequently used 


options. 


Directional buttons 


Hiding infrequently used options until they are needed is called progressive disclosure. Double chevrons are used 
to indicate progressive disclosure, and they point in the direction in which the revealing or hiding will take place: 


After the button is clicked, its label changes to indicate that the next click will have the opposite effect: 


For more information and examples, see Progressive Disclosure Controls. 


Use a directional button to 


In this case, a single angle bracket is used instead of a double chevron: 


indicate the direction in 
which an action will take Available toolbar buttons: Current toolbar buttons: 
piece * “ 
=] Read Mail fas Print ue 
. = Reset 
2B Sze Tm [Bm 
ay Encoding = iO Tools 
A Edit <Remove | |@ Help = 
df Cut - i Research 
52) Copy Separator a 
ied : : 
< r < r Move down 
A directional button indicates the direction of action. 
Guidelines 
General 
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Display a busy pointer if the result of clicking a command button isn't instantaneous. Without feedback, users might assume that 
the click didn't happen and click again. 


If the same command button appears in more than one window, try to use the same label text and access key, and locate it 
in approximately the same place in each window when practical. 


For command buttons with text labels, use a minimum button width and the standard command button height. For 
more information, see Recommended sizing and spacing. 


For each window make the command buttons the same width. If that's impractical, limit the number of different widths for 
command buttons with text labels to two. 


When another control interoperates with a command button, such as a text box with a Browse button, denote the relationship 
by placing the command button in one of three places: 
o To the right of and top-aligned with the other control. 


o Below and left-aligned with the other control. 


o Vertically centered between controls that interoperate (such as Add and Remove buttons between two interoperating list boxes). 


If multiple command buttons interoperate with the same control, vertically stack them to the right of and top-aligned with the 
other control, or horizontally place them left-aligned under the control. 


When command buttons are subordinate to other controls, use the above placement and disable the subordinate command 
button until the superior control is selected. 


Don't use narrow, short, or tall command buttons with text labels because they tend to look unprofessional. Try to work with 
the default widths and heights. 


Correct: 


L_oK 


In this example, the button size is standard and looks professional. 


Incorrect: 
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LOK | 
In this example, the button is too small. 


Incorrect: 


OK 


In this example, the button has too much space around the label. 

- Avoid combining text labels and graphics on command buttons. Combining text and graphics usually adds unnecessary visual 
clutter and does not improve the user's comprehension. Consider combining text and graphics only when the graphic aids 
in comprehension, such as when it is a standard symbol for the command or it helps users visualize the results of the 
command. Otherwise, prefer text, but use either text or graphics. 


Correct: 


@) Rotate frame | 


In this example, the arrow graphic helps users visualize the results of the command. 


Correct: 
© Back © Forward |_| Stop |. +4. Refresh | f=) | Home 


In this example, standard symbols are combined with text to aid comprehension 
Incorrect: 
PX Cancel 
In this example, the cancel graphic adds nothing to the text. 
- Don't use command buttons to set state. Use radio buttons or check boxes instead. Command buttons are only for initiating actions. 


Split buttons 


- Make the most likely command the default behavior. If there is more than one likely command, choose one that doesn't 
require additional information. 


- Ifthe most likely command is the last user selection, change the button label to the last selection. 


- Display the default command using bold text in the menu. Doing so makes it easier for users to find the default command, 
especially when the default command is dynamic or the split button uses a graphic instead of a text label. 


Default values 


- Include a default command button on every dialog box. Select the safest (to prevent loss of data or system access) and most 
secure command to be the default. If safety and security aren't factors, select the most likely or convenient command. 
- Don't make a destructive action the default command button unless there is an easy way to undo the command. 


Recommended sizing and spacing 
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Actual control size: 


50 DLUs (75 pixels) 


i ~ : ; 
— —a sisi been Cancel 14 DLUs (23 pixels) 


ae 
‘4 DLUs (6 pixels) | 


Visible size: The visible size is smaller than the 
4 7a pies control size because there is a 
ee transparent 1 pixel border around the 
: | outside of the control. 
Cx TJ 2010s 2 pis 
+i ie 


'*5 DLUs (8 pixels) 


Recommended sizing and spacing for command buttons. 
Labels 


- Label every command button. 


- Ifthe button has a graphic label only, assign its Name property to an appropriate text label. This enables assistive technology 
products such as screen readers to provide users with alternative information about the graphic. 


a 


This example shows graphic buttons; internally, these buttons are labeled Previous, Next, and Copy. 


- For short browse buttons (labeled "..."), the internal label should be Browse. 
- Assign a unique access key. For guidelines, see Keyboard. 


Exceptions: 


o Don't assign access keys to OK and Cancel buttons, because Enter is the access key for the default button (which is usually the OK 
button), and Esc is the access key for Cancel. Doing so makes the other access keys easier to assign. 


o Don't assign access keys to short browse buttons (labeled "..."), because they can't be assigned uniquely. 


- Prefer specific labels over generic ones. Ideally users shouldn't have to read anything else to understand the label. Users are far 
more likely to read command button labels than static text. 
o Exception: Don't rename the Cancel button if the meaning of cancel is unambiguous. Users shouldn't have to read all the buttons to 
determine which button cancels an action. However, rename Cancel if it is unclear what action is being canceled, such as when there 
are several pending actions. 


Acceptable: 
| OK | | Cancel 


In this example, OK and Cancel are acceptable but unspecific labels. 


Better: 
Burn CD | | Cancel 


In this example, Burn CD is more specific than OK. 


Incorrect: 
Burn CD | | Don't burn CD 


In this example, Cancel should be used instead of Don't Burn CD. 


- Start labels with an imperative verb and clearly describe the action that the button performs. Don't use ending punctuation. 
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o Exception: The following standard labels are acceptable without verbs: Advanced, Back, Details, Forward, Less, More, New, Next, No, 
OK, Options, Previous, Properties, Settings, and Yes. 


- While short labels are preferred, use enough text to explain the command sufficiently. Use a direct object (a noun after the verb) 
when the object is not apparent from context. Ideally users shouldn't have to read anything else to understand the label. 


Acceptable: 
| Add | 


In this example, a short label is acceptable if its meaning in context is readily apparent. 


Better: (if Add isn't clear) 
Add items | 


In this example, adding a noun to the verb aids users' comprehension. 


Best: (if Add or Add items aren't clear) 
| Add selected items 


In this example, the label is self-explanatory. 


- Use sentence-style capitalization. Doing so is more appropriate for Windows tone and the use of short phrases for command buttons. 
o Exception: For legacy applications, you may use title-style capitalization if necessary to avoid mixing capitalization styles. 


- Don't use now in command button labels because the immediacy of the command can be taken for granted. 
o Exception: When necessary, use now to differentiate commands that start a task from commands that perform a task immediately. 


Download 
In this example, clicking the command button goes to a window or page that allows users to download. 
Download now 


In this example, clicking the command button performs the download. 


Only one command ina task flow should be labeled with now. So, for example, a Download now command 
should never be followed by another Download now command. 


- Don't use later in command button labels if it implies an action that won't happen. For example, don't use Install later (in contrast 
to Install now) unless that command installs at a later time. Instead, use either Don't install or Cancel. 


Incorrect: 


Do you want to restart your computer now? 


| Restart now | | Restart later | 


In this example, Restart Later incorrectly implies that command restarts automatically at a later time. 


« Use an Advanced button only for options that are relevant to advanced users or require advanced user knowledge. Don't use 
an Advanced button for features that are considered technologically advanced. For example, a printer's stapling feature is not 
an advanced option, but its color management system is. 


Incorrect: (if the options really aren't advanced) 
| Advanced | 


In this example, Advanced is misleading. 
Correct: 


| More options 
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In this example, the label is more specific and accurate. 


- For command buttons that open other windows, choose a label that uses part or all of the secondary window's title bar text. 
For example, a command button labeled Browse might open a dialog box entitled Browse for Folder. Using the same 
terminology throughout the task helps to keep users oriented. 


- When asking a question, use labels that match the question. Don't use OK/Cancel to answer Yes/No questions. 


Correct: 


Are you sure you want to send "Fabrikam" to the Recycle Bin? 
=o 


In this example, the buttons answer the question. 


Incorrect: 


Are you sure you want to send "Fabrikam" to the Recycle Bin? 
[ox ) | cancel 
In this example, the buttons don't answer the question. 


End the label with an ellipsis if the command requires additional information to execute. 
o Exception: Graphic labels don't take an ellipsis. 


Correct: (if a Print options dialog is displayed) 
| Print... _| 


In this example, after the button is clicked, the Print options dialog is displayed and requires more information 
from the user. 


- Don't use an ellipsis when the successful completion of the action is simply to display another window. The following commands 
never take an ellipsis: About, Advanced, Options, Properties, Help. 


Incorrect: 
| Options... | 


In this example, after the button is clicked, the Options dialog is displayed, but more information from the user is 
not required. 


In case of ambiguity (for example, the command label lacks a verb), decide based on the most likely user action. If simply viewing 
the window is a common action, don't use an ellipsis. 


Correct: 
More colors... 
Version information 


In the first example, users are most likely going to choose a color, so using an ellipses is correct. In the second 
example, users are most likely going to view the version information, making ellipses unnecessary. 


For browse buttons, use short browse buttons (labeled "...") when there are more than two browse buttons in a window. Always 
use the short version when you want to display a browse button in a grid. 


- For directional buttons, use a single angle bracket and have it point in the direction where the action takes place. 


The following table shows some common command button labels and their usage. 


Button label |Meaning Access key 
Back In wizards and task flows, go to the previous page. 'B' 
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| Browse... 
Options 
Pause 


Personalize 


Preferences 

Properties 
ve 

Save as... 

Settings 

Troubleshoot 


aL 


Display a dialog box to look for a file or object. 8 or'r' 
Display the choices available to users for customizing a program. ‘0’ 
In progress dialog boxes, suspend the task. 'P 


Customize a core experience that is crucial to the user's personal identification |'P' 


with a program. 
Don't use. Use Options instead. 


Not applicable. 


Display the attributes and settings for an object. 


Save a group of settings, or save a file or object using its current name. 'S' 


Second ‘a’ 
Not applicable. 


Save a file or object using a specified name. 
Don't use. Use Options instead. 


Don't use. Use a specific Help link instead. 


Not applicable. 


For guidelines about commit button labels (OK, Cancel, Yes/No, Close, Stop, Apply, Next, Finish, Done), see User 


Interface Text. 


Documentation 


When referring to command buttons: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or ellipsis. Don't include the 


word button. 


- To describe user interaction, use click. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Example: Click Print to print the document. 
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Command Buttons vs. Links 


Traditionally, command buttons are used to initiate actions, whereas links are used to navigate to other places. 
Given the popularity of the Web, the use of links has expanded to include initiating commands and selecting 
options as well. For a given command, when should you use a command button? When should you use a link? 
The concept of affordance and the distinction between primary and secondary commands provide some 
guidance. 


Affordance 


Command buttons have the benefit of affordance—their visual properties (they look like they can be pushed) 
suggest how they are used. By contrast, links lack affordance and are understood only through experience. Links 
without the underline and system link colors appear as normal text. The only way to ascertain their behavior is 
from their presentation, their context, or by hovering the mouse over them. 


While lack of affordance and discoverability may sound discouraging, note that drop-down menus and context 
menus—other mechanisms for initiating actions—suffer similar problems. For a given object, users may search 
through the menu bar to discover relevant commands or try to right click to find a context menu. Also, there is 
nothing about the visual appearance of a menu that suggests how it is used—that knowledge is also learned 
though experience. However, individual menus items don't require affordance to suggest their use because a 
menu as a whole suggests its usage. Consequently, users understand what to do with a menu of relevant 
commands once discovered. 


Require a password on wakeup 


Choose what the power 
buttons do 


Choose what closing the lid 
does 


Create a power plan 


Choose when to turn off the 
display 


Change when the computer 
sleeps 


In this example, links are used for a menu of commands. The context of a menu makes the affordance of a 
command button unnecessary. 


Primary vs. secondary commands 


A primary command is necessary for the primary purpose of a window. For example, Print is a primary command 
for a Print dialog box. Use command buttons to make primary commands obvious to the user. A secondary 
command is a peripheral action that, while helpful, isn't essential to the purpose of the window. For example, 
Find Printer or Install Printer are secondary commands for a Print dialog box. Consider using links to de- 
emphasize secondary commands. 
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Gathering input vs. displaying a related window 


Use command buttons to display windows used to gather input or making choices for the task at hand. Such 
actions have command feel to them. By contrast, you can use links to display related, but independent windows. 
Such actions have a navigation feel. 


Consequently, use command buttons, not links, for commands like Open, Save, and Browse, even if they are 
secondary commands. If unsure, use command buttons to display modal windows and links for independent 
windows. 


Commitment and destruction vs. carefree navigation 


Users associate links with Web navigation. This implies a level of safety—after all, in a browser users can always 
escape using the Back button. Furthermore, when browsing, most significant commitments are made with 
command buttons, not links. 


To maintain these expectations, don't use links for commands with significant consequences, such as actions that 
are destructive or irreversible. Similarly, in a wizard or task flow, use command buttons for commitment, and 
reserve links for making choices and navigating to the next step. 


Label length 


Simply put, command button frames look awkward and heavy when they are too big. Thus, command buttons 
look best when their labels are short—typically four or fewer words. To avoid conflict between factors, strive to 
label primary commands concisely. 


The guidelines 


« Use command buttons for: 
o Primary commands. 


o Displaying windows used to gather input or making choices, even if they are secondary commands. 
o Destructive or irreversible actions, as well as commitment within wizards and page flows. 
« Use links for navigation to another page, window, or Help topic; display definitions; and command menus. 
- Consider using links to deemphasize secondary commands. 
« Use short command button labels, consisting of four or fewer words. Links can have longer labels. 
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Command Links 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 

Interaction 

Presentation 

Icons 

Default values 
Recommended sizing and spacing 
Labels 
Documentation 


With command links, users select a single response to a main instruction and by doing so, move on to the next 
step in a task. 


Command links have a clean, lightweight appearance that allows for descriptive labels, and are displayed with 
either a standard arrow or custom icon, and an optional supplemental explanation. 


Ww) wl! — Manually connect to a wireless network 


How do you want to add a network? 


The default pW Add a network that is in range of this computer 
command link “This shows you a list of networks that are currently available and lets you connect 
to one. Once you connect, a profile for the network is saved on your computer. 


The command Manually create a network profile 


link label 
This creates a new network profile or locates an existing network and saves a profile 
for the network on your computer. You need to know the network name (SSID) and 
The supplemental security key (if applicable). 
explanation 


Create an ad hoc network 
This creates a temporary network for sharing files or an Internet connection 


A typical set of command links. 


Command links are similar to radio buttons in that they are used to select from a set of mutually exclusive, 
related choices. Like radio buttons, command links are always presented in sets, never individually. In 
appearance, command links have the lightweight appearance similar to regular links, without a frame or other 
strong click affordance. Command links are also similar to command buttons, in that they can be the default 
"command button" and they can have an access key assigned. Like commit buttons, on click they either close the 
window (for dialog boxes) or advance to the next page (for wizards and pages flows). 


Note: Guidelines related to links and layout are presented in separate articles. 
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Is this the right control? 
To decide, consider these questions: 


- Are the options responses to the main instruction and related to the primary purpose of the window or page? M ust users respond 
to them to do something other than just navigating to a different page? If not, use another control such as command buttons or 
links. Command links aren't appropriate for secondary or optional choices, or pure navigation. 


Tasks 


Personalize appearance and sounds 


Change desktop icons 


, aed, Window Color and Appearance 
Adjust font size (DPI) : . 
Fine tune the color and style of your windows. 


Connect to a projector or other 
external display al Desktop Background 
Choose from available backgrounds or colors or use 
one of your own pictures to decorate the desktop. 


Screen Saver 


Change your screen saver or adjust when it displays. A 

screen saver is a picture or animation that covers your 

screen and appears when your computer is idle for a 
See also set period of time. 


Taskbar and Start Menu Sounds 


Ease of Access iad Change which sounds are heard when you do 
everything from getting e-mail to emptying your 
Recycle Bin. 


Windows Mobility Center 


While the Personalization Control Panel item looks like it is using command links, the options are regular links 
because this hub page is for pure navigation. 


- Isthe control used to choose one response from a set of mutually exclusive responses? If not, use another control. To let users 
choose individual commands, use command buttons or links. 


- For dialog boxes, does clicking the control close the window? If not, use a control that doesn't require closing the window, such 
as radio buttons, command buttons, or links. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 67 of 882 


@ Windows Firewall Settings 


General Exceptions | Advanced | 


Windows Firewall can help prevent hackers or malicious software from gaining 
access to your computer through the Internet or a network. 


Y] On (recommended) 


This setting blocks all outside sources from connecting to this 
computer, except for those unblocked on the Exceptions tab. 


Off 


Avoid using this setting. Turning off Windows Firewall will make this 
computer more vulnerable to hackers or malicious software. 


Tell me more about these settings 


Lox} [cancel _] 


Command links can't be used in property windows or tabbed dialogs because clicking the control closes the 
window. 


- For wizards and page flows, does clicking advance to the next page without commitment? Don't use command links to commit to 
a task; use commit buttons instead. Because command links look like links and users associate links with navigation within a page 
flow, links aren't appropriate for Commit pages because users should always be able to back out. 


- For wizards and page flows, are other pages using command links? If so, and all other factors being equal, prefer command links 
for consistency across pages. 


- Isthe number of responses between two and five? There should never be a single command link. Because command links are 
large controls and the screen space used is proportional to the number of options, keep the number of responses to five or fewer. 
For six or more options, use radio buttons, regular links, or a single-selection list view. 


DVD Drive (F:) DVDVolume 
e 


["] Always do this for DVD movies: 


DVD movie options 


Play DVD movie 
using Windows Media Player 


Play DVD movie 
using Windows Media Center 


General options 


using Windows Explorer 


a Open folder to view files 


Set AutoPlay defaults in Control Panel 


In this example, the AutoPlay feature in M icrosoft ®@W indows®uses a list view. 


- Would a combination of radio buttons and a commit button be a better choice? Radio buttons are a better choice when any of 
the following are true: 
o There is a strong default option that you want most users to select. Users are less likely to change a default radio button than a default 
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command link—especially in a wizard, where users are accustomed to clicking Next to accept appropriate defaults. On the other 
hand, command links are a better choice if you want to encourage users to make an explicit choice. 


o Users need to interact with the choices (perhaps to see additional information) before making a decision. For example, selecting a 
radio button might display a description about the option dynamically. 


wl, Taskbar and Start Menu Properties 


© Classic Start menu 


This menu style gives you easy access to your 
folders, favorite programs, and search. 


Privacy 
Store and display a list of recently opened files 
Store and display a list of recently opened programs 


How do I change the way the Start menu looks? 


In this example, selecting a radio button displays a description of the option. 


o There are secondary or related options on the page. Command links tend to dominate the page, making it easy to overlook everything 
else. Furthermore, once a command link is clicked, it's impossible to select secondary options. 


Incorrect: 


‘€) (2 —_- Update Driver Software - ACPI x86-based PC 


Browse for driver software on your computer 
Search for driver software in this location: 


D:\Users\Administrator\Documents ¥ 


Include subfolders 


> Let me pick from a list of device drivers on my computer 
This list will show installed driver software compatible with the device, and all driver 
software in the same category as the device. 
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In this example, there are two different ways to respond to the main instruction. A command link wasn't used for 
the first response because it would be difficult to select secondary options. 


Correct: 


‘€) {2 — Update Driver Software - ACPI x86-based PC 


Select the driver software 


@© Obtain the driver software from this location: 


D:\Users\Administrator\Documents 


(¥| Include subfolders 


© Choose from a list of device drivers on my computer 
This list will show installed driver software compatible... 


In this example, radio buttons make the responses clear, while allowing users to select secondary options. 


- For dialog boxes, would a group of commit buttons be a better choice? Command links work better when the options require 
longer, more explanatory responses and supplemental explanations, but a group of commit buttons is a better choice if there area 
few simple options. 


Incorrect: 


Do you want to save changes to D:\New 
Text Document.txt? 


> Save changes 


> Don't save changes 
All unsaved work will be lost. 


In this example, using command links for simple commands makes the dialog box unnecessarily complicated. 


Correct: 
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Do you want to save changes to D:\New 
Text Document.txt? 


In this example, using simple commit buttons gets right to the point. 


However, self-explanatory command links are always better choice when text is used to explain commit buttons. 


Incorrect: 


Windows Explorer is not responding. 

Do you want to restart? 

Choose Yes to restart the program, No to close the program, 
or Cancel to wait for the program to respond. 


| Yes} (_No_) [_ Cancet_] 


In this example, text is used to explain the commit buttons. 


Correct: 


Windows Explorer is not responding 


If you restart or close the program, you might lose 
information. 


> Restart the program 


> Close the program 


> Wait for the program to respond 


In this example, the command links are self-explanatory. 


Note: Command links require Windows Vista@®or later, so they aren't suitable for earlier versions of Windows. 
You can use regular links as a substitute. 
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> Express install (recommended) 
Get high-priority updates. 


> Custom install 


Select from optional and high-priority updates for 
Windows and other programs, 


In this example, regular links with an icon and a supplemental explanation are used as a substitute for command 
links in Windows XP. 


Design concepts 


Just because command links allow you to use more descriptive labels and optional supplemental explanations 
doesn't mean you should. Consider the following example: 


Incorrect: 


What do you want to do with your game in 
progress? 


> Exit and save my game 
Save your game in progress, then exit. This will 
overwrite any previously saved games. 


Exit and don't save 
Exit without saving your game. This is counted 
as a loss in your statistics. 


Don't exit 
Return to your game progress. 


This dialog box is seriously over-communicating. 


This dialog box takes a simple question and unnecessarily complicates it with command link text. Users don't 
want to read all that text for such simple questions. 


We can simplify this dialog box by applying three command link guidelines: 


- Don't use a supplemental explanation that is a wordy restatement of the command link. Use a supplemental explanation only 
when you can't make a command link self-explanatory. Providing a supplemental explanation for one command link doesn't mean 
that you have to provide them for all commands. 


- Select the safest (to prevent loss of data or system access) and most secure response to be the default. If safety and security 
aren't factors, select the most likely or convenient response. 


- Provide an explicit Cancel button. Don't use a command link for this purpose. 


By applying these guidelines, we can eliminate the unnecessary supplemental explanations, make the most 
convenient response the default, and provide an explicit Cancel button. 


Better: 
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What do you want to do with your game in 
progress? 


> Exit and save my game 


> Exit and don't save 


An improved version with simpler command links. 


While it's true that this version doesn't explain explicitly that not saving is counted as a loss, few users will change 
their decision based on this information, making this a good tradeoff. 


This dialog box could be made even better by analyzing whether or not command links are even the right control 
to use in this case. Commit buttons are actually a better choice, because longer, more explanatory responses 
aren't needed. 


Best: 


What do you want to do with your game in 
progress? 


The correct version uses commit buttons to get right to the point. 


Command links have many advantages, but when used unwisely they lead to over-communication. For dialog 
boxes, consider using commit buttons first and use command links only if commit buttons don't do the job well. 


When used appropriately, command links should simplify and clarify your UI. If the results are the opposite, 
take a step back, review the alternatives, and focus on what you really need to communicate. 


If you do only one thing... 
Don't use command links to over-communicate. Command links should simplify and clarify the communication, 
not make it more complicated. 


Usage patterns 


Command links have several usage patterns: 
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Page responses 
Command links 
are used to 
respond to the 
main instruction 
and advance to 
the next page. 


Dialog box 
responses 
Command links 
are used to 
respond to the 
main instruction 
and close the 
dialog box. 


With this pattern, the command links replace the Next button, but there is still a Cancel button. 


Page responses don't imply commitment. Because command links look like links and users associate links with navigation 
within a page flow, links aren't appropriate for Commit pages. Users should always be able to back out. 


€) _ Connect to the Internet 


How do you want to connect? 


Wirel 
asl ireless 


Connect using a wireless router or a wireless network. 


Broadband (PPPoE) 


Connect using DSL or cable that requires a user name and password. 


=p 


& Dial-up 
Connect using a dial-up modem or ISDN. 


Help me choose 


In this example, command links are used to give descriptive responses to the main instruction. While radio buttons 
could be used here, command links allow users to respond with a single click. 


With this pattern, the command links replace the commit buttons (such as OK), but there is still a Cancel button. 


Unlike page flows, there is no way to back out of a dialog box-based response once it has been made. Consequently, dialog 
box command links imply commitment. 
Windows Network Diagnostics 


Windows did not find any problems with this computer’s network 
connection 


If you think there is still a problem, you can do one of the following: 


> Send a report to Microsoft 


@ Reset the network adapter “Local Area Connection” 
Resetting the adapter can sometimes resolve an intermittent problem 


In this example, command links are used to give descriptive responses to the main instruction. While radio buttons 
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could be used here, command links allow users to choose with a single click. 


Detailed On occasion, users may need more detailed information to choose their response. 
responses 

A page or dialog 
response that 
includes detailed 
information. 


There is already a file with the same name in this location 
Click the file you want to keep. 


> Copy and Replace 
Replace the file in the destination folder with the file you are copying: 


Desert Landscape.jpg 
Desert Landscape (C:\New) 
Size: 223 KB 


Date modified: 10/10/2007 10:10 AM (newer) 


> Don't copy 
No files will be changed. Leave this file in the destination folder: 
Desert Landscape.jpg 
Desert Landscape (C:\Old) 
Size: 240 KB (larger) 
Date modified: 10/20/2006 12:26 PM 


> Copy, but keep both files 
The file you are copying will be renamed "Desert Landscape (2).jpg" 


[_cancet_| 


In this example, detailed command links are used so that users can make informed decisions. The thumbnails and 
file details help users decide. 


Guidelines 
Interaction 


- Display a busy pointer if the result of clicking a command link isn't instantaneous. Without feedback, users might assume that the 
click didn't happen and click again. 


Presentation 
- Always present command links in a set of two or more. Logically, there is no reason to ask a question that has only one answer. 


Incorrect: 
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=") Windows Network Diagnostics 


Wireless capability on this computer is turned off 


> Turn on wireless capability 


This can be done by using a switch, which is usually found on front or side of the 
computer, or a function key combination. 
Click here to close this dialog box. 


In this example, the dialog box appears to be offering the user a choice, but there is just an instruction. This should 
be an informational dialog instead. 


- Present the most commonly used command links first. The resulting order should roughly follow the likelihood of use, but also have 
a logical flow. 
o Exception: Command links that result in doing everything should be placed first. 


- Provide an explicit Cancel button. Don't use a command link for this purpose. Quite often users realize that they don't want to 
perform a task. Using a command link to cancel would require users to read all the command links carefully to determine which 
one means cancel. Having an explicit Cancel button allows users to cancel a task efficiently. 


Incorrect: 


> Don'texit 


Return to your game progress. 


In this example, the Don't exit command link should be a Cancel button. 


- If providing an explicit Cancel button leaves a single command link, provide both a command link to cancel and a Cancel 
button. Doing so makes it clear that users have a choice. Phrase this command link in terms of how it differs from the first 
response, instead of just "Cancel" or some variation. 
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[>"] Program Compatibility Assistant 


This program might not have uninstalled correctly 


If this program didn't uninstall correctly, try uninstalling using settings 
that are compatible with this version of Windows. 


— Program: Microsoft Setup Bootstrapper 
fre Publisher: Microsoft Corporation 
Location: D:\Program Files\Common Files\Micr...\SETUP.EXE 


@ Uninstall using recommended settings 


> This program uninstalled correctly 


oO What settings are applied? 


In this example, the second command link indicates that the user has a choice, but all it does is cancel. However, it 
is phrased in terms of how it differs from the first command link. 


- Use Close instead of Cancel if you can't return the environment to its previous state, leaving no side effect. 


- Don't display disabled command links. If a command link doesn't apply to the current context, remove it instead. If removing all 
the command links that don't apply leaves a single command link, either eliminate the window or page, or display a confirmation 
if explicit user consent is needed. 


Icons 


- All command links need an icon. The icons help users distinguish command links from regular links and user interface text. 


- Use the arrow icon only for command links. Regular links shouldn't use the arrow icon unless they are being used as a substitute 
for command links in Windows XP. 


- Use the security shield icon to indicate that a response requires immediate elevation. For additional guidelines on using the 
security shield icon, see the User Account Control. 


- Use custom icons only if they help users visually identify and differentiate the options. Don't use custom icons if they 
aren't immediately recognizable or meaningful. 


Incorrect: 


| 

| a Invite someone you trust to help you 
If you've used Remote Assistance before, you can use a previous | 
invitation to get help from the same person. 


Offer to help someone 
Offer Remote Assistance to someone or open a Remote Assistance 
invitation. 

In this example, the custom icons aren't immediately recognizable. 


- For custom icons, use 16x16 or 32x32 pixel icons. Use the larger icons if there is sufficient space and they benefit visually from 
the larger size. If you need security shield overlays, use 32x32 or 48x48 pixel icons. 
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Wireless 
Connect using a wireless router or a wireless network. 


Broadband (PPPoE) 


Connect using DSL or cable that requires a user name and password. 


=p 


4 Dial-up 
Connect using a dial-up modem or ISDN. 


This example uses 32x32 pixel custom icons. 


Z Home 
& Choose this for a home or similar location. Your computer is discoverable and 
~ you can see other computers and devices. 


Work 


iw) Choose this for a workplace or similar location. Your computer is discoverable 
and you can see other computers and devices. 


This example uses 48x48 pixel custom icons, with a security shield overlay. 


- Avoid mixing custom icons with the standard arrow icon on a window or a page. If you use a custom icon on a surface, try to use 
all custom icons. However, prefer the standard arrow icon over meaningless custom icons. 


Default values 


- Select the safest (to prevent loss of data or system access) and most secure response to be the default. If safety and security 
aren't factors, select the most likely or convenient response. 


- When practical, make the first response the default option because users often expect that—unless that order isn't logical. 
- For dialog boxes, don't make a destructive action the default command link unless there is an easy way to undo the action. 


Recommended sizing and spacing 


9 DLUs (15 pixels) 


25 DLUs (41 pixels) > Send a report to Microsoft 


35 DLUs (58 pixels) @ Reset the network adapter “Local Area Connection" 
Resetting the adapter can sometimes resolve an intermittent problem 


Labels 


Note: Because command links are responses to a main instruction, you should craft a good main instruction 
before determining its responses. 


Command link labels 


- Choose a concise label that clearly communicates and differentiates what the command link does. It should be self-explanatory 
and correspond to the main instruction. Focus the labels on the differences among the responses. Users shouldn't have to figure 
out what the command link really means or how it differs from other command links. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 78 of 882 


Windows Security Center 


G Choose an antivirus option 


Antivirus software helps protect your computer from viruses and other security threats. How 
does antivirus software help protect my computer? 


> Go online to get a different antivirus program 


@ Ihave an antivirus program that I'll monitor myself 
Security Center won't monitor your virus protection status and won't send you alerts 
if it is turned off or out of date. 


© Don't monitor my antivirus software state (not recommended) 
Security Center won't monitor your virus protection status and won't send you alerts 
if it is off or out of date. 


In this example, what is the difference between the second and third responses? Aren't you glad there's a Cancel 
button? 


- Focus command link labels on helping users make the right decision. Omit details that don't affect the choice. The labels don't have 
to be acomplete specification of what will happen. 


- Start command links with a verb. Don't use click, however, because the label should communicate what the command link does, 
not how it works. 
o Exception: If all the command links begin with the same verb or phrase, eliminate the redundant verb or phrase. 


- In general, use positive phrasing (providing a choice to do something). Negative phrasing (providing a choice not to do something) 
is acceptable if it makes the labels easier to understand. 


Use parallel phrasing and single line labels. Long labels discourage reading and shouldn't be necessary. Also, moderately sized 
labels are easier to refer to in documentation. 


- Use sentence-style capitalization. 
- Don't use ending punctuation unless the label is a question. 
Assign a unique access key. For guidelines, see Keyboard. 


- Don't use ellipses. Ellipses mean that more information might be needed to perform the action. Properly used command links 
don't need ellipses because they have an immediate effect. 


- Ifa response is strongly recommended, add "(recommended)" to the label. Be sure to add to the label, not the 
supplemental explanation. 


- Ifa response is intended only for advanced users, consider adding "(advanced)" to the label. Be sure to add to the label, not 
the supplemental explanation. 


Tip: You can evaluate command links by imagining that a friend stated the main instruction, and you responded 
with the command links. If responding with the command links would be unnatural or awkward, revise the 
command links and possibly the main instruction. 


Supplemental explanations 


- Ifa command link requires further explanation, provide a supplemental explanation. Supplemental explanations describe why 
users might want to choose a response or what happens if a response is chosen. 
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Windows Diagnostics 


Mw Your wireless router is not working properly 


> Restart the wireless router 
Allusers on the network will temporarily lose their connection. 


> Show other ways to connect to the Internet 


Whatis a wireless router? 


In this example, the supplemental explanation describes the implications of the option. 


- Don't use a supplemental explanation that is wordy restatement of the command link. Use a supplemental explanation only when 
you can't make a command link self-explanatory. Providing a supplemental explanation for one command link doesn't mean that 
you have to provide them for all. 


- Focus supplemental explanations on helping users make the right decision. Omit details that don't affect the choice. The 
supplemental explanations don't have to be a complete specification of what will happen. 


- Use parallel phrasing and at most three lines of text. Long supplemental explanations discourage reading and shouldn't be necessary. 
- Use complete sentences and ending punctuation. 


Command link group labels 

- Don't use group labels. M ain instructions act as the group label for command links. 
Documentation 
When referring to command links: 


- Use the exact label text, including its capitalization, but don't include the access key underscore. 

- If the label includes an object name, either omit the object name or use placeholder text. 

- To describe the user interaction, use click. 

- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Examples: 
To copy the picture, click Copy and Replace. 
Click Reset the network adapter. (For a command link labeled "Reset the network adaptor adaptor name".) 
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Drop-Down Lists and Combo Boxes 


Is this the right control? 
Usage patterns 
Guidelines 
General 
Presentation 
Drop-down lists 
Preview drop-down lists 
Combo boxes 
Default values 
Prompts 
Recommended sizing and spacing 
Labels 
Documentation 


With a drop-down list or combo box, users make a choice among a list of mutually exclusive values. Users can 
choose one and only one option. With a standard drop-down list, users are limited to choices in the list, but with 
a combo box they can enter a choice that isn't in the list. 


Reminder time: 


Text box —— 8:00 AM Drop-down button 


Drop-down list 


A typical combo box. 
The following terms are important to understand as you read this article: 


- Astandard list box is a box containing a list of multiple items, with multiple items visible. 


- A drop-down list is a list in which the selected item is always visible, and the others are visible on demand by clicking a drop- 
down button. 


- Acombo box is a combination of a standard list box or a drop-down list and an editable text box, thus allowing users to enter a 
value that isn't in the list. 
o An editable drop-down list isa combination of a drop-down list and an editable text box. 


o An editable list box isa combination of a standard list box and an editable text box. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 
To decide, consider these questions: 


- Isthe control used to choose one option from a list of mutually exclusive values? If not, use another control. To choose 
multiple options, use a standard multiple-selection list, check box list, list builder, or add/remove list instead. 


- Are the options commands? If so, use a menu button or split button instead. Use drop-down lists and combo boxes for objects 
(nouns) or attributes (adjectives), but not commands (verbs). 


- Does the list present data, rather than program options? Either way, a drop-down list or combo box is a suitable choice. By 
contrast, radio buttons are suitable only for a small number of program options. 


Drop-down lists 


- Isthere a default option that is recommended for most users in most situations? Is seeing the selected option far more important 


than seeing the alternatives? Consider using a drop-down list if you don't want to encourage users to make changes by hiding 
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the alternatives. If not, consider radio buttons, a single-selection list, or an editable list box, which give more emphasis to the 
alternative choices. 


Colors: 


Highest (32 bit) 


In this example, the highest color quality is the best choice for most users, so a drop-down list is a good choice to 
downplay the alternatives. 


- Do you want to draw attention to the option? If so, consider radio buttons, a single-selection list, or an editable list box, which tend 
to draw more attention by taking more screen space. Because drop-down lists are compact, they are good choices for options that 
you want to underemphasize. 


- Isscreen space at a premium? If so, use a drop-down list because the screen space used is fixed and independent of the number 
of choices. 


- Are there other drop-down lists on the window? If so, consider using a drop-down list for consistency. 
Editable drop-down lists 
In addition to the principles just provided for drop-down lists, the following also apply: 


- Are the possible choices constrained? If so, use a normal drop-down list instead. Combo boxes are for unconstrained input, in 
which users may need to enter a value not currently in the list. Because the input is unconstrained, if users enter text that isn't valid 
you must handle the error with an error message. 


- Can you enumerate the most likely choices in advance? If not, use a text box instead. 


- Is the drop-down list being used to list previous user input? Unless users need to review the complete list of previous input, use a 
text box with the auto-complete option instead. 


Type the name of a program, folder, document, or Internet 
resource, and Windows will open it for you. 


Paint! 


calc 

cmd 

explorer 

\\fabrikam\ 
http://www.microsoft.com 
mmc 

msconfig 


\\myfileshare\ 


In this example, users may need to review their previous input, so an editable drop-down list is a good choice. 


To 


Jonal 
<.. | Jonathan <Jonathan@microsoft.com> 


ad 
f 5 
H H 


In this example, a text box with auto-complete is a good choice. 


- Will users need assistance in selecting valid values? If so, use a text box with a Browse button instead. 


In this example, users can click "To" to help them select valid values. 
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- Isit important to encourage users to review the alternative choices or invite change? If so, consider using an editable list box 
instead. With an editable drop-down list, users aren't going to be aware of the alternatives until the list is dropped. 


- Do users need to locate an item rapidly in a large list? (Win32 only) If so, use a combo box because users can select an item by 
typing its full name. By contrast, the Win32 drop-down list selects items based only by the last character typed (so typing "Jun" into a 
list of months would match November, not June). In this case, use a combo box even if the possible choices are constrained. 


Editable list boxes 


Are the possible choices constrained? If so, use a single-selection list or normal drop-down list instead. Combo boxes are 
for unconstrained input, where users may need to enter a value not currently in the list. Because the input is unconstrained, if 
users enter text that is not valid you must handle the error with an error message. 


Can you enumerate the most likely choices in advance? If not, use a text box instead. 


Is it important to encourage users to review the alternative choices or invite change? If not, consider an editable drop-down 
list instead. 


- Do you want to draw attention to the option? If not, consider an editable drop-down list instead. Because drop-down lists are 
compact, they are good choices for options that you want to underemphasize. 


- Isscreen space at a premium? If so, use an editable drop-down list because the screen space used is fixed and independent of 
the number of choices. 


For drop-down lists, the number of items in the list isn't a factor in choosing the control because they scale from 
thousands of items all the way down to one. Editable drop-down lists scale from thousands of items down to 
none, because users can enter a value that isn't in the list. Because drop-down lists can be used for data, the 
number of items might not be known in advance and perhaps cannot be guaranteed. Always include at least 
three items in editable list boxes to justify the additional screen space. 


Usage patterns 


Drop-down lists and combo boxes have several usage patterns: 


Drop-down list When closed, only the selected item is visible. When users click the drop-down button, all the options become 
A standard drop-down list, visible. To change the value, users open the list and click another value. 

with a fixed set of 

predetermined values. " 


Windows Vista ¥ 


In this example, the list is in its normal state. 


Theme: 


My Current Theme 
Windows Classic 


Browse... 


In this example, the list has been dropped down. 


Preview drop-down list 

A drop-down list that 
previews the results of the 
selection to help users 
choose. 


© 2010, Microsoft Corporation. All rights reserved. Page 83 of 882 


Editable drop-down list 

A drop-down combo box, 
which allows users to enter 
a value that isn't in the 
drop-down list. 


Editable list boxes 

A regular combo box, which 
allows users to enter a 
value that isn't in the 
always visible list. 


Guidelines 


General 


Standard Colors 
Ea”) SSE EES 
SB More Colors... 


rc 
hy 
Ic 
r 
x 
x, 
J 
r 
La 
rf 
> 
® 


More Underlines... 


2 Underline Color 


In these examples, the drop-down lists preview the results of the selection. 


2 REIS | 


Examples of an editable drop-down list in edit and dropped-down modes. 


Use this control when you want to give the flexibility of a text box, yet want to assist users by providing a 


convenient list of likely choices. 


Font: 


In these examples, the editable list boxes are always displayed. 


This control is a better choice than the editable drop-down list when it is important to encourage users to review 


the alternative choices or invite change. 


- Don't use the change of a drop-down list or combo box to: 
o Perform commands. 


o Display other windows, such as a dialog box to gather more input. 
o Dynamically display other controls related to the selected control (screen readers cannot detect such events). 


Presentation 
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- Sort list items in a logical order, such as grouping highly related options together, placing most common options first, or 
using alphabetical order. Sort names in alphabetical order, numbers in numeric order, and dates in chronological order. Lists with 12 
or more items should be sorted alphabetically to make items easier to find. 


Correct: 


In this example, the list items are sorted by their spatial relationship. 


Incorrect: 
Select from list: 


Research/buy a computer 
Set up a Conference Call 
Setup a computer 

Get Exchange Status 
Send/receive a fax 
Contact Helpdesk 

Create a LOB Service Request 
Create SharePoint site 

Get status of a Helpdesk request 


In this example, there are so many list items that they need to be sorted in alphabetical order. 


Correct: 


Select a product or topic: 


All windows products 
Device drivers 

Games 

Hardware products 
Internet Explorer 
Keyboards 

Mice 

Microsoft Management Console 
MS-DOS 

Networking 

Windows 2000 

Windows CE 
Windows XP 


In this example, the list items are sorted in alphabetical order except for the option that represents all items. 


- Place options that represent All or None at the beginning of the list, regardless of the sort order of the remaining items. 
- Enclose meta-options in parentheses. 


Write debugging information: 


Small memory dump (64 KB) 
Kernel memory dump 
Complete memory dump 


In this example, "(None)" is a meta-option because it is not a valid value for the choice—rather it describes that 
the option itself isn't being used. 
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- When disabling a drop-down list or combo box, also disable any associated labels and command buttons. 
Drop-down lists 


- When a single drop-down list is used to change the view of an associated control, change the view immediately on selection instead 
of requiring a separate command button. Use a separate command button only if the list takes a significant amount of time to 
render. However, list headers and menu buttons are the preferred controls for this purpose. 


- Don't have blank list items—use meta-options instead. Users don't know how to interpret blank items, whereas the meaning of 
meta-options is explicit. 


Correct: 


Screen saver: 


3D Text 
Aurora 
Blank 
Bubbles 

Mystify 

Photos 

Ribbons 
Windows Energy 
Windows Logo 


Incorrect: 
Screen saver: 


Windows Energy 
Windows Logo 


In the incorrect example, the meaning of the blank option is unclear. 
Preview drop-down lists 


- Use previews in the list items when it is better to show with images than describe using text alone. 


tp Arial im) 
? Arial Black 

Arial Narrow 

Arial Rounded MT Bold 

& Arial Unicode MS 

‘p Baskerville Old Face 

 Batang Y 


In this example, the preview explains the options far better than text alone. 
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- Don't use unnecessary, unhelpful icons in previews. 


Incorrect: 
Special: 


® Enabled 
\ Disabl Ls | 


In this example, the preview icons are unnecessary because they don't communicate any information. 
Combo boxes 


- Limit the length of the input text when you can. For example, if the valid input is a number between 0 and 999, use a combo box that 
is limited to three characters. 


- If there are many possible options, focus the list contents on the most likely options. Because users can enter values that aren't in 
the list, combo boxes don't have to list all choices, just the likely choices or a representative sample. 


In this example, many valid choices aren't listed, such as 15, or half-size fonts such as 9.5. 
Default values 


- Select the safest (to prevent loss of data or system access) and most secure option by default. If safety and security aren't 
factors, select the most likely or convenient option. 
o Exception: Display a blank default value if the control represents a property in a mixed state, which happens when displaying a 
property for multiple objects that don't have the same setting. 


Prompts 


A prompt is a label or short instruction placed inside an editable drop-down list as its default value. Unlike static 
text, prompts disappear from the screen once users type something into the combo box or it gets input focus. 


= ; | 
Genii p 


A typical prompt. 
Use a prompt when: 


- Screen space is at such a premium that using a label or instruction is undesirable, such as on a toolbar. 


- The prompt is primarily for identifying the purpose of the list in a compact way. It must not be crucial information that users need to 
see while using the combo box. 


Don't use prompts just to direct users to select something from the list or to click buttons. For example, prompts 
like Select an option or Enter a filename and then click Send are unnecessary. 


When using prompts: 


- Draw the prompt text in italic gray and real text in normal black. The prompt text must not be confused with real text. 
- Keep the prompt text concise. You can use fragments instead of full sentences. 


- Use sentence-style capitalization. 
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- Don't use ending punctuation or ellipsis. 


- The prompt text should not be editable, and should disappear once users click in or tab into the text box. 
o Exception: The prompt is displayed if the text box has default input focus, and only disappears once the user starts typing. 


- The prompt text is restored if the text box is still empty when it loses input focus. 


Incorrect: 

Advanced search: 

Any genre: aa 
Any language: = 
Any country or region: zs 
Any state (US only): ’ 
Any band (AM, FM): ’ 
Keyword, call sign, frequency: ¥ 


In this example, screen space is not at a premium; once an editable drop-down list is filled out, it is difficult for 
users to remember what it is for; and the prompt text is editable and drawn the same way as real text. 


Recommended sizing and spacing 


3 DLUs (5 pivels) =: 


English (United States) ¥ L 14 DLUs (23 pixels) 


Recommended sizing and spacing for drop-down lists and combo boxes. 


- Choose a width appropriate for the longest valid data. Drop-down lists cannot be scrolled horizontally, so users can see only what 
is visible in the control. (Note, however, that combo boxes can have AutoScroll functionality enabled.) 


- Include an additional 30 percent (up to 200 percent for shorter text) for any text (but not numbers) that will be localized. 


- Choose a list length that eliminates unnecessary vertical scrolling. Because drop-down lists are displayed on demand, their lists 
should show up to 30 items. Editable list boxes (those that don't have a drop-down button) should show between 3 and 12 items. 


Labels 
Control labels 


- Write the label as a word or phrase, not as a sentence, and end it with a colon. 
Exceptions: 
o Editable drop-down lists with prompts located where space is at a premium. 


o Ifadrop-down list or combo box is subordinate to a radio button or check box and is introduced by its label ending with a colon, 
don't put an additional label on the control. 


- Assign a unique access key for each label. For guidelines, see Keyboard. 
- Use sentence-style capitalization. 


- Position the label either to the left of or above the control, and align the label with the left edge of the control. If label ison the 
left, vertically align the label text with the control text. 


Correct: 
HTML editor: 


| Microsoft Office Word x | 


HIML editor:. | Microsoft. Office Ward. ’ 


In this example, the label is correctly aligned with the control text. 
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Incorrect: 
HTML editor: 
[Microsoft Office Word v 


HIM Et [cosa Office Word > 


In this example, the label is incorrectly aligned with the control text. 


- You may specify units (seconds, connections, and so on) in parentheses after the label. 
- Don't make the content of the drop-down list or combo box (or its units label) part of a sentence, because this is not localizable. 


Option text 


- Assign a unique name to each option. 

- Use sentence-style capitalization, unless an item is a proper noun. 

- Write the label as a word or phrase, not as a sentence, and use no ending punctuation. 
- Use parallel phrasing, and try to keep the length about the same for all options. 


Instructional text 


- If you need to add instructional text about a drop-down list or combo box, add it above the label. Use complete sentences with 
ending punctuation. 


. Use sentence-style capitalization. 


- Additional information that is helpful but not necessary should be kept short. Place this information either in parentheses between 
the label and colon, or without parentheses below the control. 


Folder: ¥ Browse... 


Example: \\server\share 


This example shows additional information placed below the control. 
Documentation 
When referring to drop-down lists: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or colon; include either list or 
box, whichever is clearer. 


For list options, use the exact option text, including its capitalization. 


« In programming and other technical documentation, refer to drop-down lists as drop-down lists. Everywhere else, use either list or 
box, whichever is clearer. 


- 70 describe user interaction, use click. 


When possible, format the label and list options using bold text. Otherwise, put the label and options in quotation marks only if 
required to prevent confusion. 


Example: In the Font size list, click Large fonts. 
When referring to combo boxes: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or colon; include the word box. 
- For list options, use the exact option text including its capitalization. 

« In programming and other technical documentation, refer to combo boxes as combo boxes. Everywhere else, use box. 

- To describe user interaction, use enter. 


- When possible, format the label and list options using bold text. Otherwise, put the label and options in quotation marks only if 
required to prevent confusion. 
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Example: In the Font box, enter the font you want to use. 
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Group Boxes 


Is this the right control? 
Guidelines 

Labels 

Documentation 


A group box is a labeled rectangular frame that surrounds a set of related controls. A group box is a way to show 
relationships visually; aside from possibly providing an access key for a group of controls, it provides no 
functionality. 


Group box label Group box 
Privacy | 
[¥] Store and display a list of recently opened files 
[(¥] Store and display a list of recently opened programs 


A typical group box. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 

While group boxes are a strong visual means of indicating relationships, overusing them adds visual clutter and 
greatly reduces the space available on a surface. They are visually heavy and should be used sparingly—only 
when there isn't a better solution. 


A design trend in Windows@®is a simpler, cleaner appearance by eliminating unnecessary lines. 


To decide whether a group box is necessary, consider these questions: 


- Isthere more than one control in the group? If not, use a plain text label instead. A rare exception is to use a group box with a 


single control to maintain consistency with other group boxes on the same surface. 


Incorrect: 


Sample 


| AaBbyyZz 


In this example, the group box has only a single control. 


- Are the controls related? Does showing the relationship add clarity? If not, present the controls separately outside of a group 


box. 


- Are all the controls inside the group? If so, indicate the relationship on the larger surface, such as the parent dialog box or page. 


Incorrect: 
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my Taskbar and Start Menu Properties 


—_—_————————— EEE, 
} 7 Windows Explorer’ -¥ '"\) Untitled - Paint 


Lock the taskbar 

Auto-hide the taskbar 

Keep the taskbar on top of other windows 
Group similar taskbar buttons 

Show Quick Launch 

Show window previews (thumbnails) 


SOSeSO08 


How do I customize the taskbar? 


In this example, all the controls (aside from the commit buttons) in the dialog box are within the group box. 
- Can you effectively communicate the relationships using layout alone? If so, use layout instead. You can place related controls 


next to each other and put extra spacing between unrelated controls. You can also use headings and indenting to show 
hierarchical relationships. 


System and Maintenance User Accounts 
Get started with Windows @ Change account type 
Back up your computer 
" , Appearance and Personalization 


e sed 4 Change desktop background 
eck for updates 


; : ‘ Customize colors 
@ Allow a program through Windows Firewall Adjust screen resolution 


In this example, layout alone is used to show control relationships. 


- Can you effectively communicate the relationships using a separator? If so, use a Separator instead. A separator is a horizontal 
line that unifies the controls below it. Separators provide a simpler, cleaner look. However, unlike group boxes, they work best 
when they span the full width of the surface. 

o Developers: You can implement a separator with an etched rectangle with a height of one. 
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E-mail accounts - 
SS) Set up e-mail accounts and directories. 


Send/Receive 


—= Set send and receive settings for e-mail messages and documents. 


‘= [¥] Send immediately when connected 


o> Change settings for the files Outlook uses to store e-mail messages 


and documents. 


In this example, labeled separators are used to show control relationships. 


Type: File Folder 
Location: CN 
Size: 1.36 GB (1,466,201 432 bytes) 


Size on disk: 1.38 GB (1,483,361,757 bytes) 
Contains: 8,130 Files, 567 Folders 


Created: Sunday, July 29, 2007, 10:10:35 AM 


pies: a Reade 


[-] Hidden 


In this example, unlabeled separators are used to show control relationships. 


- Can you effectively communicate the relationships without text? If so, consider using graphic elements such as backgrounds or 
aggregators. 


Guidelines 
- Don't nest group boxes. Use layout to show relationships within a group box. 


Incorrect: 
System failure 
Write an event to the system log 
Automatically restart 


Write debugging information 
Dump file: 
%SystemRoot%\MEMORY.DMP 


Overwrite any existing file 


In this example, the nested group boxes result in unnecessary visual clutter. 
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Correct: 
System failure 
¥}| Write an event to the system log 


(¥] Automatically restart 


Write debugging information: 
Dump file: 
%SystemRoot%\MEMORY.DMP 


(¥] Overwrite any existing file 


In this example, the same control relationship is shown using layout instead. 


- Don't put controls in group box labels. 
o Exception: You can use a check box as a group box label if all of the controls inside the box are enabled and disabled by 


the check box. 


Incorrect: 


Settings for: Cameras 7 
Import to: E Pictures ¥ Browse... 


Folder name: Date Imported + Tag | 
File name: Tag ¥ 
Example: 2007-07-29 Himalayas\Himalayas 001.JPG 

Other options: 


¥| Prompt for a tag on import 


Always erase from camera after importing 


S| 


Rotate pictures on import 


Open Windows Photo Gallery after import 


< 


In this example, a drop-down list is incorrectly placed on a group box. This example should use tabs instead. 


- Don't disable group boxes. To indicate that a group of controls doesn't currently apply, disable all the controls within the group 
box, but not the group box itself. This approach is more accessible and can be supported consistently by all UI frameworks. 


Labels 


- Label all group boxes. 
- Don't assign an access key to the label. Doing so is unnecessary and makes the other access keys harder to assign. Instead, assign 


access keys to the controls within the group box. 
o Exception: If a surface has many controls, there may not be enough access keys available. If so, reduce the number of 


access keys by assigning them to group boxes instead of the controls within the group boxes. 


. Use sentence-style capitalization. 


- Write the label using a noun or a noun phrase, not as a sentence, and use no ending punctuation, including colons. 
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- Use parallel phrasing for group box labels within the same surface. 


- Keep group box labels concise. Don't use instructional text as the label. You can have instructional text within the group box, 
however. 


- Don't repeat the group box label in control labels within the box. For example, if the group box is labeled Alignment, label the 
option buttons Left, Right, and so on, not Left alignment or Right alignment. 


- Don't refer to group boxes in user interface text. 
Documentation 
When referring to group boxes: 


- Refer to group boxes only in programmer and other technical documentation. For group box, use two lowercase words. 


- Everywhere else, it is unnecessary to include the name of the group box in a procedure unless a dialog box contains more than 
one option with the same name. In such cases, use under with the group box name. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Example: Under Effects, select Hidden. 
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Links 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
Interaction 
Color 
Underlining 
Text with icon links 
Graphics-only links 
Navigation links 
Task links 
Menu links 
Link infotips 
Text 
Documentation 


With a link, users can navigate to another page, window, or Help topic; display a definition; initiate a command; 
or choose an option. A link is text or a graphic that indicates that it can be clicked, typically by being displayed 
using the visited or unvisited link system colors. Traditionally, links are underlined as well, but that approach is 
often unnecessary and falling out of favor to reduce visual clutter. 


Visited and unvisited links. 
Typical examples of link text. 


When users hover over a link, the link text appears as underlined (if it wasn't already) and the pointer shape 
changes to a hand. 


A text link is the lightest weight clickable control, and is often used to reduce the visual complexity of a design. 


Note: Guidelines related to command links and layout are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 


- Is the link used to navigate to another page, window, or Help topic; display a definition; initiate a command; or choose an option? 
If not, use another control. 


- Would a command button be a better choice? Use a command button if: 


o The control initiates an immediate action, including displaying a window, and that command relates to the primary purpose of the 
window. 


o A window is displayed to gather input or making choices, even if for a secondary command. 

o The label is short, consisting of four or fewer words, thus avoiding the awkward appearance of long buttons. 
o The command is not inline. 

o The control appears within a group of other related command buttons. 


o The action is destructive or irreversible. Because users associate links with navigation (and the ability to back out), links aren't 
appropriate for commands with significant consequences. 


o Similarly, in a wizard or task flow, the command represents commitment. In such windows, command buttons suggest commitment 
whereas links suggest navigating to the next step. 


For a detailed comparison, see Command Buttons vs. Links. 
Design concepts 
Making links recognizable 


pike lack affordance, which means their visual Properies don't suggest how they are used and are understood 
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only through experience. Links without an underline and link system colors appear as normal text; the only way 
to ascertain their behavior is from their presentation, their context, or by positioning the pointer over them. 


Surprisingly, this lack of affordance is often a motivation for using links because they appear so lightweight, 
thereby reducing the visual complexity of a design. Links eliminate the visually heavy frame used by command 
buttons and border used by other controls. For example, while you might use command buttons to make primary 
commands obvious, you might choose links for secondary commands to de-emphasize them. 


The challenge is then to keep enough visual clues so users can recognize the links. The fundamental guideline is 
users must be able to recognize links by visual inspection alone—they shouldn't have to hover over an object 
or click it to determine if it is a link. 


Users can recognize a link by visual inspection alone if the link uses the link system colors and at least one of the 
following visual clues: 


- Underlined text. 
« Agraphic or bullet, such as with the text with icon link pattern. 


- Placement within a standard navigation, option, or command location, such as the content area of a window, or in a navigation 
bar, menu bar, toolbar, or page footer. 


Users can also recognize a link by visual inspection with the following visual clues, but these clues aren't sufficient 
by themselves: 


- Text that suggests clicking, such as a command starting with an imperative verb like Show, Print, Copy, or Delete. 
- Placement within a block of normal text. 


Of course, users can always determine a link through interaction—either hovering or clicking. If discovery of a link 
isn't required for any significant tasks, you can de-emphasize such links. 


In this example, Contact Us, Terms of Use, Trademarks, and Privacy Statement are links. They are intentionally de- 
emphasized because they aren't required for any important tasks. The only clues that they are links are that they 
have a mouse pointer on hover and are positioned in a standard navigation area at the bottom of the window. 


Making links specific, relevant, and predictable 
Link text should indicate the result of clicking on the link. 


Specific links are more compelling to users than general links, so use link labels that give specific descriptive 
information about the result of clicking on the link. However, make sure that your link text isn't so specific that 
it is misleading and discourages proper use. 


Concise links are more likely to be read than verbose links. Eliminate unnecessary text and detail. Link labels 
don't have to be comprehensive. 


To evaluate your link text: 


- Make sure the link text reflects the scenarios that the link supports. 
- Make sure the results of the link are predictable. Users shouldn't be surprised by the results. 


If you do only two things... 

1. Make links discoverable by visual inspection alone. Users shouldn't have to interact with your program to find 
links. 

2. Use links that give specific descriptive information about the result of clicking on the link, using as much text as 
necessary. Users should be able to accurately predict the result of a link from its link text and optional infotip. 


Usage patterns 


Links have several functional patterns: 
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Navigation links Clicking the link navigates inplace to another page, as in a browser window or wizard; or displays anew window. 
A link used to navigate to —_— In contrast to task links, the navigation doesn't initiate a task but simply navigates to another place or proceeds 
another page or window. ~— witha task already in progress. Navigation implies safety because the user can always go back. 


News headlines 


In this example, clicking the link navigates to the News headlines page. 


Task links Clicking the link either performs a command immediately, or displays a dialog box or page to gather more input. 
A link used to initiate anew In contrast to navigation links, task links initiate a new task instead of continuing with an existing task. Tasks don't 
command. imply safety—users can't revert to the previous state with a Back command. Task links are so called to prevent 


confusion with command links. 
Login 


In this example, clicking the link initiates a login command. 


Help links Clicking the link displays a Help article in a separate window. 
A text link used to display a 
Help topic. What is a strong password? 


In this example, clicking the link displays a Help window with the given topic. 


Definition links This pattern is useful for defining terms that may not be known to your users without adding screen clutter. 
A text link used to display a 
definition in an infotip 
when the user clicks on or 
hovers over the link. It's important to run antispyware software whenever you're using your computer. Spyware and other 
potentially unwanted software can try to install itself on your computer any time you connect to the 
Internet. It can also infect your computer when you install some programs using a CD, DVD, or other 
removable media. Potentially unwanted or malicious software can also be programmed to run at 


Using Windows Defender 


used for information storage that is designed to be easily 
inserted into and removed from a computer or portable device. 
Common removable media include CD and DVD discs, as well as 
removable memory cards. 


ally unwanted software 


btentially unwanted 
rs you when programs 


attempt to change important Windows settings. 


In this example, the infotip definition is displayed. 
Menu links Because the context of the menu indicates a set of links, the text is usually not underlined (except on hover) and 
Aset of task links used to} — might not use the link system colors. 
create a menu. 
Recent Tasks 
Check for updates 
Get started with Windows 


Change the language for 
menus and dialogs 


In this example, a set of links creates a menu. 
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Option links Unlike regular text links, the link changes its text to reflect the currently selected option and is always drawn 
A selected option or its using the unvisited link color. 

placeholder, where clicking 

the link invokes a command 


to change that option. Apply this rule after the message arrives Apply this rule after the message arrives 


from people or distribution list from people or distribution list 
move it to the specified folder move it to the RSS Feeds folder 


The example on the left shows a rule from the M icrosoft®Outlook®Rules Wizard with placeholder options. After 
users click the links and select some options, the right-hand example updates the link text to show the results. 


Using option links is particularly suitable if the options have a variable format. 


Apply this rule after the message arrives Apply this rule after the message arrives 


from people or distribution list from people or distribution list 
move it to the specified folder and with specific words in the body 


and with specific words in the subject or body 
move it to the RSS Feeds folder 


The example on the right shows that Outlook rules have a variable format. 


3-9, Printer Features [29% Printer Features 
Print All Text as Black: Disabled =~. Print All Text as Black: 


The example on the left shows an option link. It becomes a drop-down list when selected, as shown on the right. 


Links also have several presentation patterns: 


Plain text links This presentation is the most flexible because it can be used anywhere, including inline. 
Consist only of text. 


Post a question or search for an answer in Windows communities. 


In this example, the text color clearly identifies an inline link. 


Text with icon links Because the graphic provides an additional visual indication of a link, it is easier to recognize as a link than a plain 
Text with a precedingicon — text link that isn't underlined. This pattern typically uses a 16x16 pixel icon. 
that indicates its function. 


ZZ, Adjust indexing options 


© Adjust power settings 


@e Open Disk Cleanup 


FE) Advanced tools 
In this example, the icons provide an additional visual indication of a link. 
| ® Play | 


In this example, the standard triangular Play symbol indicates that this text is a command. 
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Graphics-only links Given the lack of a text link, there is no link color or underline to indicate the link. These links depend on either 

Consist only of a graphic. the graphic design to suggest clicking, or text within the graphic that suggests an action when users click. Graphic- 
Only links sometimes have a mouse over effect to indicate the link. This approach helps, but isn't discoverable by 
visual inspection alone. 


- mi, ~~. 
= ————. = & — > 
JONATHAN-PC corp.fabrikam.com Internet 


(This computer) 


In this example, the link isn't discoverable by visual inspection alone. 


Due to their potential recognition and localization problems, graphics-only links are not recommended as the 
only way to perform a task. 


Guidelines 
Interaction 


- Display a busy pointer if the result of clicking a link isn't instantaneous. Without feedback, users might assume that the click 
didn't happen and click again. 


Color 


- Use the theme or link system colors for visited and unvisited links. The meaning of these colors is consistent across all programs. If 
for any reason users don't like these colors (perhaps for accessibility reasons), they can change them themselves. 


- For navigation links, use different colors for visited and unvisited links. Keep the history of visited links only for the duration of 
the program instance. The visited color is important to indicate where users have already been, preventing them from 
unintentionally revisiting the same pages repeatedly. 


For other types of links, don't use the visited link color. There isn't sufficient value in identifying "visited" commands, for example. 


- Don't color text that isn't a link because users may assume that it is a link. Use bold or a shade of gray where you'd otherwise 
use colored text. 
Exception: You can use colored text if all links are either underlined or placed within standard navigation or command locations. 


Incorrect: 


| 97% available (plugged in, charging) 


Current power plan: Default 


In this example, blue text is incorrectly used for text that isn't a link. 
- Use background colors that contrast with the link colors. The window system color is always a good choice. 


Incorrect: 


cing arti summarize the new Vvindows Vista core 


you should use in your Windows a Ul designs, and how they differ fram V¥indo. 


In this example, the background color provides poor contrast with the link color. 
Underlining 


- For links that are necessary to perform a primary task, provide visual clues so that users can recognize links by visual 
inspection alone. These clues include underlining, graphics or bullets, and standard link locations. Users shouldn't have to hover over 
an object or attempt to click on it to determine if it is a link. Use underlined text if the link isn't obvious from its context. 


- Don't underline text that isn't a link because users may assume that it is a link. Use italics where you'd otherwise use underlined 
text. Reserve underlining only for links. 
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- When printing, don't print underlines or link colors. Printed links have no value and are potentially confusing. 
Text with icon links 


- Use the arrow icon only for command links. Regular links shouldn't use the arrow icon unless they are being used as a substitute 
for command links in Windows XP. 


- Place the icon to the left of the text. The icon needs to lead into the text visually. 


Correct: 
EE Advanced tools 


Incorrect: 
Advanced tools Ei 


In the incorrect example, the icon doesn't lead into the text. 
- Make the result of clicking the icon the same as clicking the text. Doing otherwise would be unexpected and confusing. 
Graphics-only links 


- Don't use graphics-only links. Users have difficultly recognizing them as links and any text within the graphic (used to indicate 
their action when clicked) creates a localization problem. 


Navigation links 


- Make sure navigation links don't require commitment. Users should always be able to return to the initial state, either by using 
Back for inplace navigation or Cancel to close a new window. 


- Link to specific content rather than general content. For example, it is better to link to the relevant section of a document than to 
link to the beginning. 


Use a link only if the linked material is relevant, helpful, and not redundant. Use restraint in navigation links—don't use them 
just because you can. 


If a link navigates to an external site, put the URL in the infotip so that users can determine the target of the link. 


Link only the first occurrence of the link text. Redundant links are unnecessary and can make text difficult to read. 


Correct: 

The Pictures folder makes sharing your pictures easy. You can use the tasks in Pictures to send your pictures in e- 
mail or publish them in a secure, private location on the Web. You can also print your pictures directly from the 
Pictures folder. 


Incorrect: 

The Pictures folder makes sharing your pictures easy. You can use the tasks in Pictures to send your pictures in e- 
mail or publish them in a secure, private location on the Web. You can also print your pictures directly from the 
Pictures folder. 


In the correct example, only the first occurrence of the relevant text is linked. 


Exceptions: 
o If an instruction has a link, put the link in the instruction. 


Using strong passwords is very important. For more information, see Strong Passwords. 
In this example, the link is in the instruction instead of the first occurrence. 


o Link to later occurrences if they are far away from the first. For example, you can link redundantly in different sections within a Help 
topic. 


Task links 
- Use task links for commands that aren't destructive or are easily reversible. Because users associate links with navigation (and 


the ability to back out), links aren't appropriate for commands with significant consequences. Commands that display a dialog box or 
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a confirmation are a good choice. 


Correct: 
Start 
Stop 


Incorrect: 
Delete file 


In the incorrect example, the command is destructive. 


Menu links 


. Group related navigation and task links into menus. A menu of related links placed within a standard navigation or command 
location makes it easier to find and understand the links than when they're placed separately. 


- For selection-dependent menus, remove menu links that don't apply. Don't disable them. Doing so eliminates clutter and users 


won't miss links that require selection. 


- For selection-independent menus, disable menu links that don't apply. Don't remove them. Doing so makes the menus more 


stable and such links easier to find. 


Gv - & « Windows Update a | +4 | Search 2 


Change settings 
View update history 
Restore hidden updates 


?) Updates: frequently asked 
questions 


Learn about Windows Ultimate 
Extras 


See also 
Security Center 


Installed Updates 


Windows Update with Windows Ultimate 
Extras 


Checking for updates... 


| 


Most recent check for updates: Today at 1:21 AM 

Updates were installed: 3/22/2007 at 7:36 PM. 
View update history 

You have Windows set to: Automatically install new 
updates every day at 3:00 
AM (recommended) 

You receive updates: For Windows and other 
products from Microsoft 
Update 


In this example from Windows Update, an update is being performed, so the Check for updates command is 


disabled rather than removed. 


Link infotips 


. Ifa link requires further explanation, provide the explanation in either a supplemental explanation in a separate text control or 
an infotip, but not both. Use complete sentences and ending punctuation. Providing both is unnecessary if the text is the same, 


and confusing if the text is different. 


2 Train your computer to better understand you 


Read text to your computer to improve your computer's ability to understand your voice. Doing 
this isn't necessary, but can help improve dictation accuracy. 
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Text 


In this example, a supplemental explanation provides further information about the link. 


You'll find a Search box at the top of every folder. As you 
type in the Search box, the contents of the folder are 
immediately filtered to show only those files that match 
what you typ a 

search your |0 display files that meet a certain criteria. For example, you might filter 
the current fq_ files by a particular author so that you only see the files written by that 
view is alread Person. Filtering does not delete files, it simply changes the view so that 
files by a cert] you only see the files that meet your criteria. 


search withi 


In this example, an infotip provides further information. 
Don't provide an infotip that is merely a restatement of the link text. 


Incorrect: 


Try to connect ii 
Try to connect again. ! 


In this example, the infotip risks annoying users by its repetitiveness. 


Don't assign an access key. Links are accessed using the Tab key. 

Use links that give specific descriptive information about the result of clicking on the link, using as much text as necessary. The 
link text should indicate the result of clicking on the link. Users should be able to accurately predict the result of a link from its link 
text and optional infotip. 

Incorrect: 


A Security notice 


In this example, even though the link appears important, its label is too general. Users are more likely to click a 
more specific link. 


- For inline links: 


o Preserve the capitalization and punctuation of the text. 
o Don't include ending punctuation in the link unless the text is a question. 
o Link on the most relevant part of the text and choose link text that is large enough to be easy to click. 


Correct: 
Go to a newsgroup. 


Incorrect: 
Go to a newsgroup. 


In these examples, "Go" isn't the most relevant part of the text and it isn't large enough to make a good click 
target, whereas "newsgroup" is. 


o Avoid putting two different inline links next to each other. Users are likely to believe they are a single link. 


Incorrect: 
For more information, see UX guidelines. 


In this example, "UX" and "guidelines" are two different links. 


- For independent links (not inline): 


o Use sentence-style capitalization. 


o Don't use ending punctuation unless the link is a question. 
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o Use all the text as the link. 


- Use links that are clearly differentiated from the other links on the screen. Users should be able to accurately predict and 
differentiate between link targets. 


Incorrect: 
Find antivirus software 
Get antivirus software 


Correct: 
How to know if antivirus software is installed 
Install antivirus software 


In the incorrect example, the distinction between the two links is unclear. 


- Don't add Click or Click here to the link text. It isn't necessary because a link implies clicking. Also, Click here and here alone convey 
no information about the link when read by a screen reader. 


Incorrect: 

Click here for description. 
Click here for description. 
Click here for description. 


Correct: 
Description 


In the incorrect examples, "click here" goes without saying and conveys no information about the link. 
Navigation links 


- Start the link with a noun and clearly describe where clicking the link will go. Don't use ending punctuation. On occasion you may 
need to start navigation links with a verb, but don't use verbs that reiterate navigation that is already implied by the fact of linking, 
such as View, Open, or Go to. 


- Present a navigation link as a URL if it navigates to a Web page and you expect the target users to recall the URL and type it into 
a browser. If possible, design such URLs to be short and easy to remember. 


If the link includes a URL to a Web site starting with "www," omit the http:// protocol name and use lowercase text. 


Incorrect: 
http://www.microsoft.com 
www.microsoft.com 


Correct: 
microsoft.com 


In the incorrect examples, the "http://" and "www" go without saying. 
Task links 


- Start the link with an imperative verb and clearly describe the task that the link performs. Don't use ending punctuation. 
- End the link with an ellipsis if the command needs additional information (including a confirmation) for successful completion. 


Don't use an ellipsis when the successful completion of the task is to display another window—only when additional information 
is needed to perform the task. 

Print... 

In this example, the Print... command link displays a Print dialog box to gather more information. 


Print 


By contrast, in this example a Print command link prints a single copy of a document to the default printer without 
any further user interaction. 


Proper use of ellipses is important to indicate that users can make further choices before performing the task, 
or can cancel the task entirely. The visual cue offered by an ellipsis allows users to explore your software without 
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fear. 
- If necessary, end a task link with "now" to distinguish it from a navigation link. 


Download files 
Download files now 


In this example, "Download files" navigates to a page for downloading files, whereas "Download files now" 
actually performs the command. 


Help links 
For guidelines and examples, see Help. 
Link infotips 
- Use full sentences and ending punctuation. 
For more guidelines and examples, see Tooltips and Infotips. 
Documentation 
When referring to links: 


- Use the exact link text, including its capitalization, but don't include the ellipsis. 
- To describe user interaction, use click. 
- When possible, format the link text using bold text. Otherwise, put the link text in quotation marks only if required to prevent confusion. 


Example: To start the scan, click Scan a computer. 
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List Boxes 


Is this the right control? 
Usage patterns 
Guidelines 
Presentation 
Interaction 
Multiple-selection lists 
Default values 
Recommended sizing and spacing 
Labels 
Documentation 


With a list box, users can select from a set of values presented in a list that is always visible. With a single- 
selection list box, users select one item from a list of mutually exclusive values. With a multiple-selection list box, 
users select zero or more items from a list of values. 


List of valid modes: 


BT ao ile 1680 by 1050, True Color (32bit), 60Hertz 
1680 by 1050, High Color (16 bit), 60 Hertz 

1680 by 1050, 256 Colors, 60 Hertz = 
1280 by 1024, True Color (32 bit), 60 Hertz 

1280 by 1024, High Color (16 bit), 60 Hertz 

1280 by 1024, 256 Colors, 60 Hertz 

1280 by 800, True Color (32 bit), 60 Hertz 

1280 by 800, High Color (16 bit), 60 Hertz 

1280 by 800, 256 Colors, 60 Hertz x 


Unselected items 


A typical single-selection list box. 


Note: Guidelines related to layout and list views are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 
- Does the list present data, rather than program options? Either way, a list box is a suitable choice regardless of the number of items. 
By contrast, radio buttons or check boxes are suitable only for a small number of program options. 


- Do users need to change views, group, sort by columns, or change column widths and order? If so, use a list view instead. 


- Does the control need to be a drag source or a drop target? If so, use a list view instead. 
- Do the list items need to be copied to or pasted from the clipboard? If so, use a list view instead. 


Single-selection lists 


- Is the control used to choose one item from a list of mutually exclusive values? If not, use another control. For choosing 
multiple items, use a standard multiple-selection list, check box list, list builder, or add/remove list instead. 


- Is there a default option that is recommended for most users in most situations? Is seeing the selected option far more important 
than seeing the alternatives? If so, consider using a drop-down list if you don't want to encourage users to make changes by hiding 
the alternatives. 


Colors: 


Highest (32 bit) | 


In this example, the highest color quality is the best choice for most users, so a drop-down list is a good choice to 
downplay the alternatives. 


- Does the list require constant interaction? If so, use a single-selection list to simplify the interaction. 
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Display items: Item foreground: 


Mowat - 


Selected Text 

Inactive Selected Text Item background: 

Indicator Margin 

Line Numbers [] Default ¥ 
Visible White Space 

Bookmark | Bold 

Brace Matching (Highlight) 
Brace Matching (Rectangle) 
Breakpoint (Disabled) 
Breakpoint (Enabled) 
Breakpoint (Error) AaBbCcXxYyZz 
Breakpoint (Warning) a 


) IN| > 


Sample: 


In this example, users are constantly changing the selected item in the Display items list to set the foreground and 
background colors. Using a drop-down list in this case would be very tedious. 


- Does the setting seem like a relative quantity? Would users benefit from instant feedback on the effect of setting changes? If 
so, consider using a slider instead. 

- Is there a significant hierarchical relationship between the list items? If so, use a tree view control instead. 

- Is screen space at a premium? If so, use a drop-down list instead because the screen space used is fixed and independent of the 
number of list items. 


Standard multiple-selection lists and check box lists 


- Is multiple selection essential to the task or commonly used? If so, use a check box list to make multiple selection obvious, especially 
if your target users aren't advanced. Many users won't realize that a standard multiple-selection list supports multiple selection. Use 


a standard multiple-selection list if the check boxes would draw too much attention to multiple selection or result in too much 
screen clutter. 


- Is the stability of the multiple selection important? If so, use a check box list, list builder, or add/remove list because clicking 
changes only a single item at a time. With a standard multiple selection list, it's very easy to clear all the selections—even by accident. 


- Isthe control used to choose zero or more items from a list of values? If not, use another control. For choosing one item, use a 
single-selection list instead. 
Preview lists 
- Are the options easier to select with images than with text alone? If so, use a preview list. 


List builders and add/remove lists 


- Isthe control used to choose zero or more items from a list of values? If not, use another control. For choosing one item, use a 
single-selection list instead. 


Does the order of the selected items matter? If so, the list builder and add/remove list patterns support order, whereas the 
other multiple-selection patterns do not. 


- Is it important for users to see a summary of all the selected items? If so, the list builder and add/remove list patterns display only 
the selected items, whereas the other multiple-selection patterns do not. 


- Are the possible choices unconstrained? If so, use an add/remove list so that users can choose values not currently in the list. 


- Does adding a value to the list require a specialized dialog box for choosing objects? If so, use an add/remove list and display 
the dialog box when users click Add. 


- Is screen space at a premium? If so, use an add/remove list instead because it uses less screen space by not always showing the set 
of options. 


For list boxes, the number of items in the list isn't a factor in choosing the control because they scale from 
thousands of items all the way down to one for single-selection lists (and none for multiple-selection lists). 
Because list boxes can be used for data, the number of items might not be known in advance. 


Note: Sometimes a control that looks like a list box is implemented using a list view and vice versa. In such cases, 
apply the guidelines based on usage, not implementation. 


Usage patterns 
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List boxes have several usage patterns: 


Single-selection lists 
Allow users to select one 
item at atime. 


Data source: 


Microsoft Access Database File 
Microsoft ODBC Data Source 
Microsoft SQL Server 

Microsoft SQL Server Database File 
Microsoft SQL Server Mobile Edition 
<other> 


In this example, users can select only one display item. 


Standard multiple- Standard multiple-selection lists have exactly the same appearance as single-selection lists, so there is no visual clue 
selection lists that a list box supports multiple selection. Because users have to discover this ability, this list pattern is best used for 
Allow users to select any tasks where multiple selection isn't essential and is rarely used. 
number of items, including 
none. There are two different multiple-selection modes: multiple and extended. Extended selection mode is by far the 
more common, where the selection can be extended by dragging or with Shift+click and Ctrl+click to select 
groups of contiguous and non-adjacent values, respectively. In the multiple-selection mode, clicking any item 
toggles its selection state regardless of the Shift and Ctrl keys. Given this unusual behavior, multiple-selection 
mode is deprecated and you should use check box lists instead. 


Messages to view: 


ACM_OPENW 
ACM_PLAY 
ACM_STOP 


BM_CLICK 

BM_GETCHECK 
BM_GETIMAGE 
BM_GETSTATE 
BM_SETCHECK 


In this example, users can select any number of items using the multiple-selection mode. 


Check box lists Unlike standard multiple-selection lists, the check boxes clearly indicate that multiple selection is possible. Use this 
Like standard multiple- list pattern for tasks where multiple selection is essential or commonly used. 
selection list boxes, check 
box lists allow users to 

; Toolbars: 
select any number of items, 


including none. Sa es - 


¥} Class Designer a 
| Context Menus 

Data Design 

Database Diagram 

Debug 

| Debug Location 

Device 

Dialog Editor 

(] Distributed System Designers 
|| Formatting 

Help 

HTML Source Editing 

Image Editor 

Layout : 


In this example, users typically select more than one item so a check box list is used. 


Given this clear indication of multiple selection, you might assume that check box lists are preferable to standard 
multiple-selection lists. In practice, few tasks require multiple selection or use it heavily; using a check box list in 
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Preview lists 
Can be single or multiple 


selection, but they show a 
preview of the effect of the 


selection rather than just 
text. 


List builders 

Allow users to create a list 
of choices by adding one 
item at atime, and 
optionally setting the list 
order. 


Add/ remove lists 

Allow users to create a list 
of choices by adding one or 
more items at atime, and 
optionally setting the list 
order (like list builders). 


such cases draws too much attention to selection. Consequently, standard multiple-selection lists are far more 
common. 


Window Color and Appearance 


You can change the color of windows, the Start menu, and the taskbar. Pick one of the available colors or create 
your own color using the color mixer. 


Default Graphite Blue Teal 


Red Orange 


In this example, a preview of each option clearly shows the effect of the choice, which is more effective than using 
text alone. 


A list builder consists of two single-selection lists: the list on the left is a fixed set of options and the list on the right is 
the list being built. There are two command buttons between the lists: 


- An Add button that moves the currently selected option to the list being built, inserted before the selected 
item. (Double-clicking on an option item has the same effect.) 


- A Remove button that removes the selected item from the built list and returns it to the option list. (Double- 


clicking on an item in the built list has the same effect.) The built list may optionally have Move Up and Move 
Down commands to order the list items. 


Available toolbar buttons: Current toolbar buttons: 
Separator ; a - 

(=) Read Mail day Print 

— — =<" 
é'> Encoding = @ Tools 

4, Edit < Remove | |@) Help 7 

& Cut - @& Research 

53) Copy Separator 

pad 4 : 


In this example, a list builder is used to create a toolbar by selecting items from a set of available options and 
setting their order. 


Unlike a list builder, clicking Add displays a dialog box to select items to add to the list. Using a separate dialog box 
allows for significant flexibility in choosing items—you can use a specialized object picker or even a common dialog. 
Compared to the list builder, this variation is more compact but requires slightly more effort to add items. 


Menu contents: 


Spy++ 
Visual Studio 2005 Command Prompt 
MFC-ATL Trace Tool 


Move up 


Move down 


In this example, users can add or remove tools from a menu, as well as set order. 


While the list builder and add/remove list patterns are significantly heavier than the other multiple-selection lists, 
they offer two unique advantages: 
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- Users have control over the list order, both while building the list and after. 


. Users can review a summary of the selected items, which can be a significant benefit if the number of choices 
is large. 


Their disadvantages are that they require much more screen space and can be difficult to use when creating a 


large list of items from scratch. Consequently, they are best used to create short lists or modify lists that already 
exist. 


Guidelines 
Presentation 


- Sort list items in a logical order, such as grouping related options together, placing most frequently used items first, or 
using alphabetical order. Sort names in alphabetical order, numbers in numeric order, and dates in chronological order. Lists with 12 
or more items should be sorted alphabetically to make items easier to find. 


Correct: 
Alignment: 


In this example, the list box items are sorted by their spatial relationship. 


Incorrect: 


Select a product or topic: 


Windows XP 
Windows 2000 
Windows CE 
MS-DOS 
Networking 
Microsoft Management Console 
Internet Explorer 
Games 

Hardware products 
Keyboards 

Mice 

Device drivers 


In this example, there are so many list items that they should be sorted in alphabetical order. 


Correct: 
Select a product or topic: 


Device drivers 
Games 

Hardware products 
Internet Explorer 
Keyboards 

Mice 

Microsoft Management Console 
MS-DOS 
Networking 
Windows 2000 
Windows CE 
Windows XP 


In this example, the list items are easier to find because they are sorted in alphabetical order. However, the item 
"All Windows products" is at the beginning of the list, regardless of its sort order. 


- Place options that represent All or None at the beginning of the list, regardless of sort order of the remaining items. 


- Enclose meta-options in parentheses. 
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Animation: 
Blinking Background 
Las Vegas Lights 
Marching Black Ants 
Marching Red Ants 
Shimmer 
Sparkle Text 


In this example, "(none)" is a meta-option because it is not a valid value for the choice—rather it indicates that 
the option itself isn't being used. 


- Don't have blank list items—use meta-options instead. Users don't know how to interpret blank items, whereas the meaning of 
meta-options is explicit. 


Incorrect: 


Animation: 


Blinking Background 
Las Vegas Lights 
Marching Black Ants 
Marching Red Ants 
Shimmer 

Sparkle Text 


In this example, the meaning of the blank item is unclear. 


Correct: 


Animation: 


Blinking Background 
Las Vegas Lights 
Marching Black Ants 
Marching Red Ants 
Shimmer 

Sparkle Text 


In this example, the "(none)" meta-option is used instead. 


Interaction 
- Consider providing double-click behavior. Double-clicking should have the same effect as selecting an item and performing its 
default command. 


- Make double-click behavior redundant. There should always be a command button or context menu command that has the 
same effect. 


- If users can't do anything with the selected items, don't allow selection. 


Correct: 


You have successfully completed the Accessibility wizard. 
You made the following changes: 


Mouse Keys 
Mouse Speed 


Sizes of Window Elements 


This list box displays a read-only list of changes; there is no need for selection. 


- When disabling a list box, also disable any associated labels and command buttons. 


- Don't use the change of the selected item in a list box to: 
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o Perform commands. 
o Display other windows, such as a dialog box to gather more input. 


o Dynamically display other controls related to the selected control (screen readers cannot detect such events). Exception: You 
can dynamically change static text used to describe the selected item. 


Acceptable: 
Choose an action to perform: 
Description 


Export Favorites + 

Spent Cader Import favorites from another browser or file. 
Export Cookies 
Import Feeds 
Export Feeds 


In this example, changing the selected item changes the description. 


- Avoid horizontal scrolling. M ulticolumn lists rely on horizontal scrolling, which is generally harder to use than vertical 
scrolling. M ulticolumn lists that require horizontal scrolling may be used when you have many alphabetically sorted items and 
sufficient screen space for a wide control. 


Acceptable: 


- 


Name | Date modified Type Size 


)) 3com_dmi )) 1033 1054 )) CatRoot 
1025 ))1037 2052 jb CatRoot2 


1028 1041 3076 diccm 


ad 1031 a 1042 db appmgmt PY) ccmsetup 
« Cowal > 


In this example, multiple columns that require horizontal scrolling are used because there are many items and 
plenty of available screen space for a wide control. 


Multiple-selection lists 


- Consider displaying the number of selected items below the list, especially if users are likely to select several items. This 
information not only gives useful feedback, but it also clearly indicates that the list box supports multiple selection. 


Messages to view: 


ACM_OPENW 
ACM_PLAY 
ACM STOP 


BM_CLICK 

BM_GETCHECK 

BM_GETIMAGE 

BM_GETSTATE 

BM_SETCHECK 

BM_SETIMAGE 

BM_SETSTATE né 


4 messages selected. 


In this example, the number of selected items is displayed below the list. 


- You can provide other selection metrics that might be more meaningful, such as the resources required for the selections. 
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Windows Features 


Turn Windows features on or off 


e 


To turn a feature on, select its check box. To turn a feature off, clear its 
check box. A filled box means that only part of the feature is turned on. 


mY} ActiveX Installer Service 

}) Games 

r) Indexing Service 

[] )) Internet Information Services 
r) Microsoft .NET Framework 3.0 


)) Print Services 

}) Remote Differential Compression 
a Removable Storage Management 
)) RIP Listener 

)) Services for NFS 


db Microsoft Message Queue (MSMQ) Server 


_)) Simple TCPIP services (i.e. echo, daytime etc) 


Total disk space required: 72.9 MB 
Space available on disk: 147214 MB 


In this example, the disk space required to install the components is more meaningful than the number of items 


selected. 


- If there are potentially many list items and selecting or clearing all of them is likely, add Select all and Clear all command buttons. 


- For standard multiple-selection lists, don't use multiple-selection mode because this selection mode has been deprecated. 


For equivalent behavior, use a check box list instead. 


Default values 


- Select the safest (to prevent loss of data or system access) and most secure option by default. If safety and security aren't 


factors, select the most likely or convenient option. 


Exception: Don't select any items if the control represents a property in a mixed state, which happens when 
displaying a property for multiple objects that don't have the same setting. 


Recommended sizing and spacing 


3 DLUs (5 pixels) :::2-: 


Acceptable only if list contents are data 
whose size isn't know in advance and 


most items aren't truncated. Line Numbers 


Bookmark 
Brace Matching 
Breakpoint 


Choose a length that displays an integral 
number of items. 


Whenever possible, longest item should 
allow for 30% expansion for localiza- 
tion. 


— If possible, make the list slightly longer if 
~ | doing so eliminates the vertical scroll bar. 


Recommended sizing and spacing for list boxes. 


- Choose a list box width appropriate for the longest valid data. Standard list boxes cannot be scrolled horizontally, so users can see 


only what is visible in the control. 


- Include an additional 30 percent (up to 200 percent for shorter text) for any text (but not numbers) that will be localized. 


- Choose a list box height that displays an integral number of items. Avoid truncating items vertically. 


- Choose a list box height that eliminates unnecessary vertical scrolling. List boxes should display between 3 and 20 items without 
the need for scrolling. Consider making a list box slightly longer if doing so eliminates the vertical scroll bar. Lists with potentially 
many items should display at least five items to facilitate scrolling by showing more items at a time and making the scroll bar easier 


to position. 
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- If users benefit from making the list box larger, make the list box and its parent window resizable. Doing so allows users to adjust 
the list box size as needed. However, resizable list boxes should display no fewer than three items. 


Labels 


Control labels 


- All list boxes need labels. Write the label as a word or phrase, not as a sentence; use a colon at the end of the label. 


Exception: Omit the label if it is merely a restatement of a dialog box's main instruction. In this case, the main 
instruction takes the colon (unless it's a question) and access key. 


Acceptable: 


Choose the application to receive the image 
Available applications: 
Microsoft PowerPoint 


Microsoft Picture It! Publishing Platinum 
Microsoft Publisher 


In this example, the list box label just restates the main instruction. 


Better: 


Choose the application to receive the image: 


Microsoft PowerPoint 
Microsoft Picture It! Publishing Platinum 
Microsoft Publisher 


In this example, the redundant label is removed, so the main instruction takes the colon and access key. 


- If alist box is subordinate to a radio button or check box and is introduced by that control's label ending with a colon, don't put 
an additional label on the list box control. 


© Append primary and connection specific DNS suffixes 
Append parent suffixes of the primary DNS suffix 
@) Append these DNS suffixes (in order): 


Microsoft.com [4] 
MSN.com 
Live.com a) 


Add... Edit... Remove 


In this example, the list box is subordinate to a radio button and shares its label. 


- Assign a unique access key. For guidelines, see Keyboard. 
- Use sentence-style capitalization. 


- Position the label either to the left of or above the control, and align the label with the left edge of the control. 
o If label is on the left, vertically align the label text with the first line of text in the control. 


Correct: 


Color scheme: 


A 
Windows Vista Basic 
Windows Standard 
Windows Classic 
High Contrast White 
High Contrast Black 
High Contrast #2 Ms 


| om 
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Windows Classic 


feomen-ucem Windows Aero 
High Contrast White 


Windows Vista Basic a 
Windows Standard f 
High Contrast Black 

High Contrast #2 be 


In these examples, the label on top aligns with the left edge of the list box and the label on the left aligns with the 
text in the list box. 


Incorrect: 


Color scheme: 


High Contrast #2 aul 


Color scheme: |S RIS ans 
Windows Vista Basic 
Windows Standard 
Windows Classic 
High Contrast White 
High Contrast Black 
High Contrast #2 be 


Wos| > 


In these incorrect examples, the label on top aligns with the text in the list box and the label on the left aligns with 
the top of the list box. 


- For multiple-selection list boxes, use a label that clearly indicates multiple selection is possible. Check box list labels can be less explicit. 


Correct: 

Select one or more add-ons: 
MSN toolbar a~ 
Windows Messenger Li 
XML DOM Document 


In this example, the label clearly indicates that multiple selection is possible. 


Incorrect: 
Add-ons: 
MSN toolbar 


Windows Messenger [i 
XML DOM Document 


In this example, the label provides no obvious information about multiple selection. 


Best: 
Add-ons: 
¥| MSN toolbar a~ 


Windows Messenger Li 
XML DOM Document 


v) 
iv 
In this example, the check boxes clearly indicate that multiple selection is possible, so the label doesn't have to be 
explicit. 
- You may specify units (seconds, connections, and so on) in parentheses after the label. 
Option text 


- Assign a unique name to each option. 
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- Use sentence-style capitalization, unless an item is a proper noun. 
- Write the label as a word or phrase, not as a sentence, and use no ending punctuation. 
- Use parallel phrasing, and try to keep the length about the same for all options. 


Instructional and supplemental text 


- lf you need to add instructional text about a list box, add it above the label. Use complete sentences with ending punctuation. 
- Use sentence-style capitalization. 


- Additional information that is helpful but not necessary should be kept short. Place this text either in parentheses between the label 
and colon, or without parentheses below the control. 


@ Windows Firewall Settings 


| General | Exceptions | Advanced 
ICMP settings 
Information requests from the Internet that this computer responds 


to: 
Allow incoming echo request S 


| ma 


Description 
Internet Control Message Protocol (ICMP) allows the computers on 
a network to share error and status information. 


In this example, supplemental text is placed below the list. 


Documentation 
When referring to list boxes: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or colon. Include the word list. 
Don't refer to a list box as a list box or a field. 


- For list items, use the exact item text, including its capitalization. 
- In programming and other technical documentation, refer to list boxes as list boxes. Everywhere else, use list. 
- To describe user interaction, use select. 


- When possible, format the label and list items using bold text. Otherwise, put the label and items in quotation marks only if required 
to prevent confusion. 


Example: In the Go to what list, select Bookmark. 
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List Views 


Is this the right control? 
Usage patterns 
Guidelines 
Presentation 
Interaction 
Multiple-selection lists 
Changing views 
Details views 
Recommended sizing and spacing 
Labels 
Documentation 


With a list view, users can view and interact with a collection of data objects, using either single selection or 
multiple selection. 


Column header 


* 


Sort column Name if. Type Size 
7) 3com_dmi | a | Mame ; PY) export a ras 
))1025 | ¥ Date modified Dias }) ReinstallBackups 
db 1028 Y Type ad icsxml a Restore 
)) 1031 All sce IME Setup 
}) 1033 ; Di inetsrv )) ShellExt 
1037 | Title )) Macromed )) SoftwareDistribution 
1041 | Authors ). Microsoft )) spool 
jo 1042 om J) MsDtc jo usmt 
)) 1054 | mui Di vPCache 
js 2052 | More... di npp i wbem 
) 3076 } cobe Di wins 
) aliedit \)) DRVSTORE )) Preinstall i xircom 


A typical list view. 


List views have more flexibility and functionality than list boxes. Unlike list boxes, they support changing views, 
grouping, multiple columns with headings, sorting by columns, changing column widths and order, being a drag 
source or a drop target, and copying data to and from the clipboard. 


Note: Guidelines related to layout and list boxes are presented in separate articles. 


Is this the right control? 


A list view is more than just a more flexible and functional list box: its extra functionality results in different 
usage. The following table shows the comparison. 


List boxes List views 
Datatype Both data and program options. Data only. 
Contents —_Labels only. Labels and auxiliary data, possibly in multiple columns. 


Interaction (Used for making selections. Can be used for making selections, but often used for displaying and interacting with 
data. Can be a drag source or a drop target. 

Presentation |Fixed. Users can change views, group, sort by columns, and change column widths and 
order. 


To decide if this is the right control, consider these questions: 


- Does the list present data, rather than program options? If not, consider using a list box instead. 

- Do users need to change views, group, sort by columns, or change column widths and order? If not, use a list box instead. 
- Does the control need to be a drag source or a drop target? If so, use a list view. 

- Do the list items need to be copied to or pasted from the clipboard? If so, use a list view. 


Check box list views 


- Is the control used to choose zero or more items from a list of data? To choose one item, use single selection instead. 
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- Is multiple selection essential to the task or commonly used? If so, use a check box list view to make multiple selection 
obvious, especially if your target users aren't advanced. If not, use a standard multiple-selection list view if the check boxes would 
draw too much attention to multiple selection or result in too much screen clutter. 


- Isthe stability of the multiple selection important? If so, use a check box list, list builder, or add/ remove list because clicking 


changes only a single item at a time. With a standard multiple selection list, it's very easy to clear all the selections—even by accident. 


Note: Sometimes a control that looks like a list view is implemented using a list box, and vice versa. In such cases, 


apply the guidelines based on the usage, not on the implementation. 


Usage patterns 


All views support single selection, where users can select only one item at a time, and multiple selection, where 
users can select any number of items, including none. List views support extended selection mode, where the 
selection can be extended by dragging or with Shift+click or Ctrl+click to select groups of contiguous or non- 
adjacent values, respectively. Unlike list boxes, they don't support multiple selection mode, where clicking any 
item toggles its selection state regardless of the Shift and Ctrl keys. 


Standard list view 


The list view control supports five standard views: 


Tile 


: Date taken Tags Name Size Rating 
Each item appears as a 
medium icon, with a label Autumn Leaves Creek 
and optional details to the a EG bnage 
right. 269 KB 258 KB 
Desert Landscape Dock 
pa JPEG Image | JPEG Image 
223 KB 309 KB 
Forest Forest Flowers 
rz JPEG Image a JPEG Image 
648 KB 125 KB 
MM Frangipani Flowers Garden 
_ JPEG Image JPEG Image 
105 KB 504 KB 
Tile view shows medium icons with labels and optional details on the right. 
Large icon Date taken Tags Name Size 


Each item appears as an 
extra large, large, or 


medium icon with a label 
~ psi 


Large Icon view shows each item asa large icon with a label below it. 
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Autumn Leaves Creek Desert Landscape Dock 


Forest Forest Flowers Frangipani Flowers Garden 
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Small icon 

Each item appears as a 
small icon with a label to 
the right. 


List 

Each item appears as a 
small icon with a label to 
the right. 


Details 


in atabular format. The 
leftmost column contains 
both the item's optional 
icon and label, and the 
subsequent columns 
contain additional 
information, such as item 
properties. 


List view variations 


Column chooser 


List views sometimes have 


so many columns that it 


isn't practical to show them 


all. In this case, the best 


approach is to display the 


most useful columns by 


default and allow users to 
add or remove columns as 


needed. 


Date taken 

Autumn Leaves 
Desert Landscape 
Forest 

Frangipani Flowers 
Green Sea Turtle 
Humpback Whale 
Toco Toucan 


HAP BEEEe 


Winter Leaves 


Tags Name 


Size 
Creek 
Dock 
Forest Flowers 


Garden 


Tree 
Oryx Antelope 
Waterfall 


DAP eeee 


Small Icon view shows each item as a small icon with its label on the right. 


» 


In List mode, this view orders items in columns and uses a horizontal scrollbar. By contrast, the icon view modes 
order items in rows and use a vertical scrollbar. 


Date taken Tags 
lm| Autumn Leaves 
lm | Creek 

m= | Desert Landscape 
lm | Dock 

(=) Forest 

lim-| Forest Flowers 


lm) Frangipani Flowers 


Name 


Size Rating 
im Garden 
(| Green Sea Turtle 


= 
(| 
| Tree 
= 
= 


=) Oryx Antelope 
im) Toco Toucan 
=) Waterfall 


List mode shows each item as a small icon with its label on the right. 


lm!| Winter Leaves 


Additionally, columns can be added or removed, and reordered and resized. Rows can be grouped, sorted by 
Each item appearsasarow column. 


Name 


Toco Toucan 
|Dock 

Autumn Leaves 
Creek 

Desert Landscape 
Forest 

Tree 

Waterfall 

Forest Flowers 


MPAA eee 


Frangipani Flowers 
Garden 
Winter Leaves 


nae 


Date taken 


6/24/2005 12:22 PM 
6/22/2005 8:17 PM 
11/4/2005 6:12 PM 
4/30/2005 11:20 AM 
2/12/2004 5:30 PM 
4/25/2005 12:00 AM 
9/3/2005 6:40 PM 
5/27/2005 8:15 AM 
4/26/2005 4:50 PM 
6/2/2005 3:41 PM 
4/9/2004 8:17 AM 
1/17/2005 7:43 AM 


- 


Tags 

Sample; Wildlife 
Sample; Ocean 
Sample; Landscape 
Sample; Landscape 


Sample; Landscape 
Sample; Landscape 
Sample; Landscape 
Sample; Landscape 
Sample; Flowers 
Sample; Flowers 
Sample; Flowers 


Sample; Flowers 


Size 


Rating 

W WWW 
W WWW 
WwW WwW 
W WwW 
WWW WW 
WWW 
W WwW 
WWW 
WWW 
WWW 
W WWW 
W WW I 


113 KB 
310 KB 
270 KB 
259 KB 
224 KB 
649 KB 
752 KB 
281 KB 
126 KB 
106 KB 
505 KB 
207 KB 


Details view shows each item asa line in a table format. 
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Name Date modifiel 37 ame 


; aes v__ Date modified 


j 1028 v_ Type 
))1031 Vv Size 
)) 1033 
)) 1037 
))1041 
(1042 
))1054 
(bh 2052 
a 3076 4 DRVSTORE 
aliedit export 
) appmgmt a jas 


Right-clicking the column heading displays a context menu that allows users to add or remove columns. 


Select the details you want to display for the items in this 


Details: 


v | Moveup 
Type 
Total size 
¥| Free space 
Comments 


Width of selected column (in pixels): 


Coc) (_concet_} 


Clicking More in the column header context menu displays the Choose Columns dialog box, which allows users to 
add or remove columns as well as reorder them. 


Check box list view Multiple-selection list views have exactly the same appearance as single-selection list views, so there is no visual 
Allow users to select clue that they support multiple selection. A check box list view can be used to clearly indicate that multiple 
multiple items. selection is possible. Consequently, this pattern should be used for tasks where multiple selection is essential or 


commonly used. 
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Performance Options 


Visual effects | Advanced | Data execution prevention 


Select the settings you want to use for the appearance and 
performance of Windows on this computer. 


@ Let Windows choose what's best for my computer 
~) Adjust for best appearance 

») Adjust for best performance 

») Custom: 

Animate controls and elements inside windows 
Animate windows when minimizing and maximizing 
Enable desktop composition 

¥| Enable transparent glass 

Fade or slide menus into view 

Fade or slide ToolTips into view 

Fade out menu items after clicking 

Show preview and filters in folder 

Show shadows under menus 

Show shadows under mouse pointer 

Show thumbnails instead of icons 


[ox J {ances | 


In this example, a Small Icon view uses check boxes because multiple selection is essential to the task. 


List views with groups While Details views often support sorting the data by any of the columns, list views further allow users to 
Organize the data into organize the items into groups. Some benefits of grouping are: 
groups. 


« Groups works in all views (except list), so, for example, users could group an extra large icons view of albums by artist. 


- Groups can be high-level collections, which are often more meaningful than grouping directly off the data. For example, 
Windows®Explorer groups dates into Today, Yesterday, Last week, Earlier this year, and A long time ago. 


1. Get started with Windows (14) a 


iw View computer details a Transfer files and settings Se Tablet PC Pen Training 
ep Connect to the Internet y Windows Ultimate Extras Q What's new in Windows Vista 


Show all 14 items... 


2. Offers from Microsoft (6) a 


S)@ \ Go online to learn about Go online to find it fast with Go online to help protect 
\ A Windows Live Windows Live your PC with Windows Live 
Go online to Windows Go online to find more ways Sign up online for technical 
Marketplace to help protect your PC support 
In this example, the Windows Welcome Center shows grouped items in a list view. 


Guidelines 


Presentation 


- Sort list items in a logical order. Sort names in alphabetical order, numbers in numeric order, and dates in chronological order. 


- Ifappropriate, allow users to change the sort order. User sorting is important if the list has many items or if there are scenarios 
where items are found more effectively using a sort order other than the default. 


- Use the Always Show Selection attribute so that users can readily determine the selected item, even when the control doesn't 


have focus. 
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- Avoid presenting empty list views. If users create a list, initialize the list with instructions or example items that users might need. 


ee | DP « Search Results + | + 


Show only: [All] E-mail Document Picture Music Other Advanced search(¥) 


To begin, type in the search box 


To search more of your computer, use Advanced search. 


In this example, the Search list view initially presents instructions. 


- Ifusers can change views, group, sort by columns, or change columns and their widths and order, make those settings persist so 
they take effect the next time the list view is displayed. M ake them persist on a per-list view, per-user basis. 


Interaction 


Use single-click to select the list item the user is pointing to. Exception: For the command link list pattern, single-click selects the 
item and either closes the window or navigates to the next page. 


Consider providing double-click behavior. Double clicking should have the same effect as selecting an item and performing its 
default command. 


Make double-click behavior redundant. There should always be a command button or context menu command that has the 
same effect. 


If a list item requires further explanation, provide the explanation in an infotip. Use complete sentences and ending punctuation. 


Name Category 

ny Fonts Appearance and Personalization 
¢4Indexing Options System and Maintenance 

9 Game Controllers Hardware and Sound 
®yInternet Options Network and Internet; Security 
@, iSCSI Initiator System and Maintenance 

<> Keyboard iS Hardware and Sound 

a " ‘Customize your keyboard settings, such as the cursor blink rate and the 
7 My character repeat rate. 

Ss Network and Sharing Center ork and Intern 

P offline Files Network and Internet 

Z Pen and Input Devices Hardware and Sound; Mobile PC 
* People Near Me Network and Internet 


MB Performance Information and Tools System and Maintenance 
In this example, an infotip is used to provide further information. 


- Provide context menus of relevant commands. Such commands include Cut, Copy, Paste, Remove or Delete, Rename, and Properties. 


- Ifusers can change the sort order and grouping, provide Sort By and Group By context menus. The first click on a column name 
sorts or groups the list in the ascending order for that column, the second click sorts or groups in descending order. Use the 
previous order (from another column) as the secondary key. 
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Name Date modified Type Size 
a 3com_dmi i dhep r) Restore 
1025 View » mY) Setup 
1028 
9 Sort » 
1031 ssi - ___[} Distribution 
1033 Group by U Date modified 
\)) 1037 Stack by > 
ag 
1041 Refresh 
1042 
1054 Customize this folder... 
2052 
\)) 3076 Paste 
aliedit Paste shortcut | 
appmgmt fase Jepx 
) CatRoot = |_}12520850.cpx 
}) CatRoot2 & Groove folder synchronization _ jal5.tbl 
ccm ues |_| a234.tbl 
a ccmsetup || aaaamon.dll 
Com Properties |) access.cpl 
a config (| acctres.dll 


In this example, the Sort By context menu changes the sort order. Clicking Name once sorts by name in ascending 
order. Clicking Name again sorts by name in descending order. 


- Make the list view column header accessible using the keyboard. 
o Developers: You can do this by setting focus on the column header control. This capability is new to Windows Vista® 


- When disabling a list view, also disable any associated labels and command buttons. 


- Avoid horizontal scrolling. The List mode uses horizontal scrolling. This mode is usually the most compact, but horizontal scrolling 
is generally harder to use than vertical scrolling. Consider using the Small Icon view instead if compactness isn't important. However, 


List mode is a good choice when there are many alphabetically sorted items and sufficient screen space for a wide control. 


Acceptable: 


COv- ry « Windows » System32 > 


Organize ¥ 


Date modified Type 


®) kbd101b.dil 
(®) kbd 01c.dll 
(®) kbd103.dll 

(®] kbd106.dll 

(®) kbd106n.dil 
®) KBDAL.DLL 
(| KBDA2.DLL 
(| KBDA3.DLL 
(| KBDAL.DLL 


rex 


v | +4] | Search Pp 


Size 


(| KBDARME.DLL 
|| KBDARMW.DLL 


®) kbdax2.dll 
(®) KBDAZE.DLL 
®) KBDAZEL.DLL 
) KBDBASH.DLL 
®) KBDBE.DLL 

) KBDBENE.DLL 
) KBDBGPH.DLL 


') KBDBHC.DLL 
®) KBDBLR.DLL 
| KBDBR.DLL 
®) KBDBU.DLL 
| KBDBULG.DLL 
®) KBDCA.DLL 
) KBDCAN.DLL 
®) KBDCR.DLL 
®) KBDCZ.DLL 


In this example, List mode is used because there are many items and plenty of available screen space for a wide 


control. 


Multiple-selection lists 


- Consider displaying the number of selected items below the list, especially if users are likely to select several items. This 
information not only gives useful feedback, but it also clearly indicates that the list view supports multiple selection. 
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Humpback Whale Winter Leaves 


5 items selected Date taken: 1/17/2005 10:43 PM - 12/1/2005 5:20 AM 


In this example, the number of selected items is displayed below the list. 


- Alternatively instead of the number of selected items, you can give other selection metrics that might be more meaningful, such as 
the resources required for the selections. 


Turn Windows features on or off 


To turn a feature on, select its check box. To turn a feature off, clear its 
check box. A filled box means that only part of the feature is turned on. 


}) Indexing Service 

_}) Internet Information Services 

)) Microsoft .NET Framework 3.0 

r) Microsoft Message Queue (MSMQ) Server 
\}) Print Services 

}) Remote Differential Compression 

) Removable Storage Management 

)) RIP Listener 

)) Services for NFS 

Simple TCPIP services (i.e. echo, daytime etc) 
Total disk space required: 72.9 MB 

Space available on disk: 147214 MB 


GBOOOS8OeBOoOs84 


(ox) [cancer] 


In this example, the disk space required to install the components is more meaningful than the number of 
components selected. 


« For check box list views, if there are potentially many items and selecting or clearing all of them is likely, add Select all and Clear 
all command buttons. 


- Use mixed-state check boxes to indicate partial selection of the items in a container. The mixed state is not used as a third state for 
an individual item. 


Changing views 
If users can change views: 


- Choose the most convenient view by default. Any changes users make should be made persistent on a per-list view, per-user basis. 


- Change the view using a split button, menu button, or drop-down list. Whenever practical, use a split button on the toolbar 
and change the button label to reflect the current view. 
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Favorite Links 


EB Documents 
EB Pictures 


Be Music 


(Recently Changed 


More » 


Folders 


img35 


JPEG Image 


§) Extra large icons 


=) Large icons 


= i i 
aia} Medium icons 


225 Small icons 


Oryx Antelope 


Date taken: Specify date and time taken 


In this example, a split button on the toolbar is used to change views. 


- Provide a View context menu. 


Date modified Type Size 

a 3com_dmi dhcp mY) Restore 
\)) 1025 Tae = =a 

- View » Extra large icon 
1028 : 
a 1031 Sort by r Large icons 
1033 Group by , Medium icons 
J) 1037 Stack by , Small icons 
A ine Refresh Li 
ji 1042 © List 
jp 1054 Customize this folder... sans 
ji 2052 = 
)) 3076 Paste 
m) aliedit ache Gateicat Auto arrange 
a appmgmt Align to grid 
m CatRoot Undo copy Ctrl+Z 
}) CatRoot2 Groove folder synchronization r |} al5.tbl 
ccm =. ; |) a234.tbl 
r} ccmsetup sid (3) aaaamon.dll 
com Properties || access.cpl 
) config || acctres.dll 


In this example, a View context menu is used to change views. 


Details views 


- Consider using tiles view to improve readability. 


Acceptable: 

Issued to Issued by 

EQlMicrosoft Corp Ent... Microsoft Corporate R... 
EQl Microsoft Corp Ent... Microsoft Intranet CA 
EQl Microsoft Corp Ent... Microsoft Corporate R... 
EQl Microsoft Corporat... Microsoft Corporate R... 
EQl Microsoft Corporat... Microsoft Corporate R... 
Eql Microsoft Corporat... Microsoft Corporate R... 
Egl Microsoft Intranet CA Microsoft Corporate R... 


Expiratio... 
10/12/2008 
9/30/2007 
10/12/2008 
12/15/2017 
2/25/2008 
9/20/2019 
5/11/2010 


Ww 


In this example, there is too much data and the window, list, and columns are too small, making the list items 


hard to read. 
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Better: 


| issued to Issued by 


Microsoft Corp Enterprise CA 2 
re Microsoft Corporate Root CA 

10/12/2008 

Microsoft Corp Enterprise CA 1 
a. Microsoft Corporate Root CA 

10/12/2008 


re Microsoft Corporate Root Authority 


Microsoft Corporate Root Authority 


Expiration date » 


Microsoft Intranet CA 


9/30/2007 


re Microsoft Corp Enterprise CA 2 


re Microsoft Corporate Root Authority 


Microsoft Corporate Root Authority 
12/15/2017 


Microsoft Corporate Root Authority 


»soft Corporate Root Authority 


2/25/2008 9/20/2019 


In this example, Tile view displays the data without truncation. 


- Choose default column widths appropriate for the longest data. List views automatically truncate long data with ellipses, so 
the column widths are appropriate if few ellipses are displayed by default. While users can resize columns, prefer other solutions: 


1. Size each column width to fit its data. 

2. Size the control width to fit its columns plus any likely scrollbars. 
3. If necessary, use horizontal scrolling. 

4. Have truncated data only for odd-sized items or as a last resort. 


If normal-sized data must be truncated by default, make the window and list view resizable. Include an additional 30 percent (up to 


200 percent for shorter text) for any text (but not numbers) that will be localized. 


Incorrect: 
Issued to Issued by Expiratio... Friendly name > 
El Microsoft corp ent... Microsoft corporater... 10/12/2008 +<None> E 
EQlMicrosoft corp ent... Microsoft intranetca 9/30/2007 + <None> 
EQl Microsoft corp ent... Microsoft corporater... 10/12/2008 <None> 
E@lMicrosoft corporat... Microsoft corporater... 12/15/2017 <None> 
| Microsoft corporat... Microsoft corporater... 2/25/2008 § <None> 
l Microsoft corporat... Microsoft corporater... 9/20/2019 <None> 
EQlMicrosoft intranet ca Microsoft corporater... 5/11/2010  <None> Sf 


In this example, most data is truncated. The many ellipses clearly indicate that the control and column widths are 


too small for the data. 


Incorrect: 


General | Organization | Phone/Notes | Member of | E-mail addresses 


Group membership: 


& All full time employees of bu... 
& All full time employees (Part... 
& All full time employees 

& Company development and... 


& Employees of company in Fa... 
& Fabrikam all full time emplo... 
&® Friends 

&, Point source users 


In this example, data is truncated without reason. 


- Choose an appropriate default column order. Generally, order the columns as follows: 
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. First, the item name or identifying data. 

. Next, other data useful in differentiating the list items. 

. Next, the most useful (preferably short or fixed length) data. 
. Next, less useful (preferable short or fixed length) data. 


uaF WN 


Last, long, variable-length data. 


Long, variable length-data is placed in the last columns to reduce the need for horizontal scrolling. Within these 
categories, place related information together in a logical sequence. 


- When appropriate, allow users to add and remove columns, as well as change the order. Display the most useful columns by 
default. This is achieved with the Header Drag Drop attribute. 


- Choose an alignment appropriate for the data. Use the following rules: 
o Right-align numbers, currencies, and times. 


o Left-align text, IDs (even if numeric), and dates. 


- For sortable column headings, the first click on a heading sorts the list in ascending order for the column, the second click sorts 
in descending order. Use the previous sort order (from another column) as the secondary sort key. 


Name Originall... Datedeleted Size | Type 

)) contents files D:\Users\... 3/29/2007 ... 4KB File Folder 

)) Windows Vista User Experience Guideline... D:\Users\... 3/29/2007... OKB File Folder 

|_| AutoRecovery save of Document.asd D:\Users\... 3/23/2007 ... 27KB_ ASD File 

|_| AutoRecovery save of Tree Views.asd D:\Users\... 3/13/2007 ... 693 KB ASD File 

€) contents D:\Users\... 3/29/2007 ... 2KB HTML Document 
@ | header D:\Users\... 3/29/2007 ... 3KB HTML Document 
€ Home D:\Users\... 3/29/2007... 7KB HTML Document 
€ | Windows Vista User Experience Guidelines D:\Users\... 3/29/2007... 1KB HTML Document 
(m| addtional D:\Users\... 3/16/2007 ... 74 KB JPEG Image 

(=| Humpback Whale D:\Users\.... 3/21/2007 ... 257 KB JPEG Image 


In this example, the Name column was clicked first, then the Type column. Asa result, Type in ascending order is 
the primary sort key, and Name in ascending order is the secondary. 


- Use the Full Row Select attribute so that users can readily determine the selected items in all columns. 
- Don't use a sortable column header unless the data can be sorted. 
- Don't use a column header if there is only one column and there is no need to reverse sort. Use a label instead to identify the data. 


Incorrect: 
Files to delete 
¥) @ Previous Windows installation(s) 4.00 KB 
V7] @ Recycle Bin Obytes 
Correct: 
Files to delete: 
7] @ Previous Windows installation(s) 4.00 KB 
Y] @ Recycle Bin Obytes 


In the correct example, a label is used instead of a column header. 


Recommended sizing and spacing 


le label: 
9 DLs pick) ee 
Choose a column width that avoids —7-Pen action Equivalent mouse action 
truncated data for most if not all data. S : 
Double-tap Double-click 

Choosing a height that displays an —+Press and hold Right-click 

integral number of items. Start Tablet PC Input Panel = None —— If possible, make the list slightly longer if 
doing so eliminates the vertical scroll bar. 


Recommended sizing and spacing for list views. 
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- Choose a list view height that displays an integral number of items. Avoid truncating items vertically. 


- Choose a list view size that eliminates unnecessary vertical and horizontal scrolling in all supported views. List views should 
display between 3 and 20 items. Consider making a list view slightly larger if doing so eliminates a scroll bar. Lists with potentially 
many items should display at least five items to facilitate scrolling by showing more items at a time and making the scroll bar easier 
to position. 


- Ifusers benefit from making the list view larger, make the list view and its parent window resizable. Doing so allows users to 
adjust the list view size as needed. However, resizable list views should display no fewer than three items. 


Labels 
Control labels 


- All list views need labels. Write the label as a word or phrase, not as a sentence, ending with a colon using static text. 
- Assign a unique access key. See Keyboard for guidelines on assigning access keys. 

. Use sentence-style capitalization. 

« Position the label above the control and align the label with the left edge of the control. 


- For multiple-selection list views, write the label that clearly indicates multiple selection is possible. Check box list view labels can be 
less explicit. 


Correct: 
Select one or more add-ons: 
MSN toolbar £ 


Windows Messenger 
XML DOM Document 


In this example, the label clearly indicates that multiple selection is possible. 


Incorrect: 
Add-ons: 
MSN toolbar A 


Windows Messenger 
XML DOM Document 


In this example, the label provides no information about multiple selection. 


Acceptable: 
Add-ons: 
MSN toolbar A 


Windows Messenger | 
XML DOM Document 


as 


In this example, the check boxes clearly indicate that multiple selection is possible, so the label doesn't have to be 
explicit. 


- You may specify units (seconds, connections, and so on) in parentheses after the label. 
Heading labels 


« Keep the heading labels brief (three words or fewer). 
« Use a single noun or noun phrase with no ending punctuation. 
. Use sentence-style capitalization. 


- Align the heading the same way as the data. 
Group labels 


- Use the following group labels for high-level collections: 
> Names: Use first letter of name or letter ranges. 


> Sizes: Unspecified, 0 KB, 0-10 KB, 10-100 KB, 100 KB- 1 MB, 1-16 MB, 16-128 MB 
> Dates: Today, Yesterday, Last week, Earlier this year, and A long time ago. 
- Otherwise, group labels use the exact text of the data being grouped, including capitalization and punctuation. 


Data text 


. Use sentence-style capitalization. 
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Instructional text 


- If you need to add instructional text about a list view, add it above the label. Use complete sentences with ending punctuation. 
. Use sentence-style capitalization. 


- Additional information that is helpful but not necessary should be kept short. Place this information either in parentheses between 
the label and colon or without parentheses below the control. 


Documentation 
When referring to list views: 


- Use the exact label text including its capitalization but don't include the access key underscore or colon, and include the word list. 
Don't refer to a list box as a list box, list view, or field. 


- For list data, use the exact data text including its capitalization. 
- Refer to list views as list views only in programming and other technical documentation. Everywhere else use list. 
- To describe user interaction, use select for the data, and click for the headings. 


« When possible, format the label and list options using bold text. Otherwise, put the label and options in quotation marks only if 
required to prevent confusion. 


Example: In the Programs and services list, select File and printer sharing. 
When referring to check boxes in a list view: 


« Use the exact label text including its capitalization, and include the word check box. Don't include the access key underscore. 
- To describe user interaction, use select and clear. 
- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Example: Select the Underline check box. 
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Progress Bars 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
General 
Determinate progress bars 
Indeterminate progress bars 
Modeless progress bars 
Modal progress bars 
Time remaining 
Progress bar colors 
Meters 
Recommended sizing and spacing 


Labels 


With a progress bar, users can follow the progress of a lengthy operation. A progress bar may either show an 
approximate percentage of completion (determinate), or indicate that an operation is ongoing (indeterminate). 


Usability studies have shown that users are aware of response times of over one second. Consequently, you 
should consider operations that take two seconds or longer to complete to be lengthy and in need of some type 
of progress feedback. 


ee 


A typical progress bar. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 


To decide, consider these questions: 


Will the operation complete in about five seconds or less? If so, use an activity indicator instead, because displaying a progress bar 
for such a short duration would be distracting. If the operation usually takes five seconds or less but sometimes takes more, start with 
a busy pointer and convert to a progress bar after five seconds. 


Is an indeterminate progress bar used to wait for the user to complete a task? If so, don't use a progress bar. Progress bars are for 
computer progress, not user progress. 


Is an indeterminate progress bar combined with an animation? If so, use just the animation instead. The indeterminate progress bar 
is effectively a generic animation and adds no value to the animation. 

Is the operation a very lengthy (longer than two minutes) background task for which users are more interested in completion than 
progress? If so, use a notification instead. In this case, users do other tasks in the meantime and are not monitoring the progress. 
Using a notification allows users to perform other tasks without disruption. Examples of such lengthy operations include printing, 
backup, system scans, and bulk data transfers or conversions. 


When the operation is complete, will users be able to replay the results? If so, use a slider instead. Examples of such operations 
include video and audio recording and playback. 


> | Windows Media Player 


S= 


B (niean( — ) a~ 
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In this example, a slider is used to indicate progress while playing sound. Doing so allows users to replay the 
results later. 


Design concepts 
During a lengthy operation, users need a general idea of what the operation is doing. They also need to know: 


- That a lengthy operation has started. 

- That progress is being made and that the operation will eventually complete (and therefore hasn't locked up). 

- The approximate percentage of the operation that has been completed (and therefore the percentage remaining). 
- If they should cancel the operation if it isn't worth continuing to wait. 

- If they should continue to wait or do something else while the operation completes. 


Use determinate progress bars for operations that require a bounded amount of time, even if that amount of 
time cannot be accurately predicted. Indeterminate progress bars show that progress is being made, but provide 
no other information. Don't choose an indeterminate progress bar based only on the possible lack of accuracy 
alone. 


For example, suppose an operation requires five steps and each of those steps requires a bounded amount of 
time, but the amount of time for each step can vary greatly. In this case, use a determinate progress bar and 
show progress when each step completes proportional to the amount of time each step usually takes. Use an 
indeterminate progress bar only if a determinate progress bar would cause users to conclude incorrectly that the 
operation has locked up. 


If you do only one thing... 
Make sure that you provide progress feedback for lengthy operations and that the above information is clearly 
communicated. Use determinate progress bars whenever possible. 


Usage patterns 
Progress bars have several usage patterns: 


Determinate progress bars 


Modal Because this feedback is modal, users cannot perform other tasks in the window (or its parent if displayed in a 
determinate modal dialog box) until the operation is complete. 

progress bars 

Indicate an 

operation's ; = 

progress by Microsoft Windows 

filling from left 

to right and Please wait while the features are configured 
filling completely 

when the This might take several minutes. 

operation is 

OTApIELE: ee 


In this example, the progress bar gives feedback during configuration. 
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Modal 


determinate ue Back Up Face 
progress bars 
ith a Cancel or 
stop button Scanning files to backup 
Allow users to 
halt the = = 
operation, 
perhaps because Preparing to back up D:\SWINDOWS.~Q\DA...\ZHZ2PZGX 
the operation is 
taking too long 


or isn't worth 
the wait. 


In this example, users can click Stop to halt the operation and leave the environment in its current state. 


Modal 
determinate Microsoft Office Outlook 
progress bars 
with a Cancel or 
Stop button and 
animation 
Allow users to 
halt the 
operation, and 
include an 


Preparing Outlook for first use. 
Retrieving mailbox settings... 
animation to - — 


help users 
visualize the 
effect of an 
operation. 


In this example, users can click Stop to halt the operation and leave the environment in its current state. 


Modal Because the first progress bar provides little additional information and can be quite distracting, this pattern is 
determinate not recommended. Instead, have all the steps in the operation share a portion of the progress and have a single 
double progress progress bar go to completion once. 

bars 


Indicate the : : : 
progress of a Windows Media Player Skins (2 of 2 items) 62% 


multi-step Cr) a) 
operation by 
showing the 
progress of the Downloading file. Time remaining: 00:35. Received 980KB 53% 


uentiot | 


the first progress 
bar, and the 
overall progress In this example, the first progress bar shows the progress of the current step and the second progress bar shows 
in the second the overall progress. 

bar. 


Note: This pattern is usually unnecessary and should be avoided. 
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Modeless Unlike with modal progress bars, users can perform other tasks while the operation is in progress. These progress 
determinate bars can be displayed in context or ona status bar. 

progress bars 

Indicate an 

operation's —— 

progress by 

filling from left — In this example, Windows®Internet Explorer @displays its progress for loading a Web page on the status bar. 
to right and Users can perform other tasks while the page is loading. 

filling completely 

when the 

operation is 

complete. 


Indeterminate progress bars 


Modal Used only for operations whose overall progress cannot be determined, so there is no notion of completeness. 
indeterminate §Determinate progress bars are preferable because they indicate the approximate percentage of the operation that 
progress bars has been completed, and help users determine if the operation is worth continuing to wait. They are also less visually 
Indicate an distracting. 

operation isin 


progress by 

showing an . 

si wcHOnHat Checking for updates... 

continuously 

cycles across the : EE : 

bar from left to 

right. 
In this example, Windows Update uses a modal indeterminate progress bar to indicate progress while it looks for 
updates. 

Modeless Unlike modal progress bars, users can perform other tasks while the processing is in progress. These progress bars 

indeterminate — can be displayed in context or on a status bar. 

progress bars 

Indicate an 

operation isin 

progress by [B=] Mollerup Jonathan 

showing an aaa —— 

animation that sn Organization | Phone Notes. | Member of | E-mail addresses 

continuously Name 

cycles across the irst: Mollerup| Initials: Last: Jonathan 

bar from left to ; 

right. isplay: Mollerup Jonathan Alias: mollejot 
In this example, Microsoft Outlook®uses a modeless indeterminate progress bar while filling in contact properties. 
Users can continue to use the property window while this work is in progress. 

Meters 

Meters This pattern isn't a progress bar, but it is implemented using the progress bar control. Meters have a distinct look 

Indicate a to differentiate them from true progress bars. 

percentage that 


is not related to Windows Vista (D:) 


rogress. 
ies ES 
17.3 GB free of 25.5 GB 


In this example, the meter shows the percentage of disk drive space used. 
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Guidelines 


General 


Provide progress feedback when performing a lengthy operation. Users should never have to guess if progress is being made. 


Clearly indicate real progress. The progress bar must advance if progress is being made. If the range of expected completion times is 
large, consider using a non-linear scale to indicate progress for the longer times. You don't want users to conclude that your program 
has locked up when it hasn't. 


Clearly indicate lack of progress. The progress bar must not advance if no progress is being made. You don't want users to wait 
indefinitely for an operation that is never going to complete. 


Provide useful progress details. Provide additional progress information, but only if users can do something with it. M ake sure the 
text is displayed long enough for users to be able to read it. 


Install_Messenger.exe from download.microsoft.com 
-—_—_—_  — 
Estimated time left: 33 sec (1.56MB of 18.0MB copied) 
Download to: Temporary Folder 

Transfer rate: 20KB/ sec 


In this example, users can see the transfer rate. The low transfer rate here suggests the need for using a high- 
bandwidth network connection. 


Don't provide unnecessary details. Generally users don't care about the details of the operation being performed. For example, users 
of asetup program don't care about the specific file being copied or that system components are being registered because they have 
no expectations about these details. Typically, a well-labeled progress bar alone provides sufficient information, so provide additional 
progress information only if users can do something with it. Providing details that users don't care about makes the user experience 
overly complicated and technical. If you need more detailed information for debugging, don't display it in release builds. 


Correct: 


Please wait while this wizard installs Windows Live Messenger. This may take a few 
minutes. 


- — 


In this example, the labeled progress bar is all that is needed. 


Correct: 


Install_Messenger.exe from download.microsoft.com 
—_—_— — 
Estimated time left: 33 sec (1.56MB of 18.0MB copied) 
Download to: Temporary Folder 

Transfer rate: 20KB/ sec 


In this example, Windows Explorer is copying files the user selected, so displaying the filenames being copied is 
meaningful. 


Incorrect: 


Status: 
Registering system components... 


In this example, a setup program is providing details that are meaningless to the user. 


Provide useful animations. If done well, animations improve the user experience by helping users visualize the operation. Good 
animations have more impact than text alone. For example, the progress bar for the Outlook Delete command displays the Recycle 
Bin for the destination if the files can be recovered, but no Recycle Bin if the files can't be recovered. 
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Microsoft Office Outlook 


t< 


Deleting items 

In ‘Sent Items' 
- 

35 Seconds Remaining 


In this example, the lack of a Recycle Bin reinforces that the files are being permanently deleted. This additional 
information wouldn't be communicated as effectively using text alone. 


Don't use unnecessary animations. Animations can be misleading because they usually run in a separate thread from the actual task 
and therefore can suggest progress even if the operation has locked up. Also, if the operation is slower than expected, users 
sometimes assume that the animation is part of the reason. Consequently, only use animations when there is a clear justification; 
don't use them to try to entertain users. 


Position animations centered over the progress bar. Put the animation above the progress bar labels, if you have any. If there is a 
Cancel or Stop button to the right of the progress bar, include the button when determining the center. 


Play a sound effect at the completion of an operation only if it is very lengthy (longer than two minutes), infrequent, and 
important. If the user is likely to walk away from an important operation while it is processing, a sound effect restores the user's 
attention. Using a sound effect upon completion in other circumstances would be a distracting annoyance. 


Don't steal input focus to show a progress update or completion. Users often switch to other programs while waiting and don't want 
to be interrupted. Background tasks must stay in the background. 


Don't worry about technical support. Because the feedback provided by progress bars isn't necessarily accurate and is fleeting, 
progress bars aren't a good mechanism for providing information for technical support. Consequently, if the operation can fail (as 
with a setup program), don't provide additional progress information that is only useful to technical support. Instead, provide an 
alternative mechanism such as a log file to record technical support information. 


Incorrect: 


Status: 
Registering COM server {098f2470-bae0-11cd-b579-08002b30bfeb} 


Ce) 


In this example, the progress bar is showing details intended for technical support. 


Don't put the percentage complete or any other text on a progress bar. Such text isn't accessible and isn't compatible with using 
themes. 


Incorrect: 
( coy — 
In this example, the percentage text on the progress bar isn't accessible. 


Don't combine a progress bar with a busy pointer. Use one or the other, but not both at the same time. 


Don't use vertical progress bars. Horizontal progress bars have a more natural mapping and better flow. 


Determinate progress bars 


- Use determinate progress bars for operations that require a bounded amount of time, even if that amount of time cannot be 
accurately predicted. Indeterminate progress bars show that progress is being made, but provide no other information. Don't choose 
an indeterminate progress bar based only on the possible lack of accuracy alone. 
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Clearly indicate the progress phase. The progress bar must be able to indicate if the operation is in the beginning, middle, or end of 
an operation. For example, progress bars that immediately shoot to 99 percent completion, then stay there for along time are 
particularly uninformative and annoying. In these cases, the progress bar should be set initially to at most 33 percent to indicate that 
the operation is still in the beginning phase. 

Clearly indicate completion. Don't let a progress bar go to 100 percent unless the operation has completed. 


Provide a time remaining estimate if you can do so accurately. Time remaining estimates that are accurate are useful, but estimates 
that are way off the mark or bounce around significantly aren't helpful. You may need to perform some processing before you can 
give accurate estimates. If so, don't display potentially inaccurate estimates during this initial period. 


Don't restart progress. A progress bar loses its value if it restarts (perhaps because a step in the operation completes) because users 
have no way of knowing when the operation will complete. Instead, have all the steps in the operation share a portion of the progress 
and have the progress bar go to completion once. 


Incorrect: 


Status: 
Decompressing files 


i) 


Status: t 


Copying files 
— 


In this example, the operation moved to the step of copying files and reset the progress bar for that step. Now 
users have no idea how much progress has been made or how much time is left. 


Don't back up progress. As with a restart, a progress bar loses its value if it backs up. Always increase progress monotonically. 
However, you can have a time remaining estimate that increases (as well as decreases) because the rate of progress may vary. 


Indeterminate progress bars 


Use indeterminate progress bars only for operations whose overall progress cannot be determined. Use indeterminate progress 
bars for operations that require an unbounded amount of time or that access an unknown number of objects. Use timeouts to give 
bounds to time-based operations. 


Convert to a determinate progress bar once the overall progress can be determined. For example, if it takes significantly longer than 
two seconds to determine the number of objects, you can use an indeterminate progress bar while the objects are counted, and then 
convert to a determinate progress bar. 


Don't combine indeterminate progress bars with percent complete or time remaining estimates. If you can provide this information, 
use a determinate progress bar instead. 


Don't combine indeterminate progress bars with animations. An indeterminate progress bar is effectively a generic animation, so 
you should use one or the other but never both. 


Correct: 


Detecting ISA Server 


Firewall Client is detecting ISA Server... 


In this example, only an animation is used to show that an operation is ongoing. 


Modeless progress bars 
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- If users can do something productive while the operation is in progress, provide modeless feedback. You might need to disable a 
subset of functionality that requires the operation to complete. 


- If the window has an address bar, display the modeless progress in the address bar. 


[usireetworkyrifabrikam > Tools » ~ [x] 


In this example, modeless progress is shown in the address bar. 


- Otherwise, if the window has a status bar, display the modeless progress in the status bar. Put any corresponding text to its left in 
the status bar. 


ee _ 
In this example, modeless progress is shown in the status bar. 


Modal progress bars 


- Place modal progress bars on progress pages or progress dialog boxes. 


- Provide a command button to halt the operation if it takes more than a few seconds to complete, or has the potential never to 
complete. Label the button Cancel if canceling returns the environment to its previous state (leaving no side effects), otherwise label 
the button Stop to indicate that it leaves the partially completed operation intact. You can change the button label from Cancel to 
Stop in the middle of the operation if at some point it isn't possible to return the environment to its previous state. Center the 
command button vertically with the progress bar instead of aligning their tops. 


Correct: 
Waiting for the network... 


\ EEE | 
In this example, halting the network connection has no side effect so Cancel is used. 
Correct: 
| 2 Minutes and 30 Seconds Remaining 
Copying 2,228 items (712 MB) 


from Desktop (Desktop) to Local Disk (D:) (D:\) 
About 2 minutes and 30 seconds remaining 


\¥) More information 


In this example, halting the copy leaves any copied files, so the command button is labeled Stop. 


Incorrect: 
Search... 


[ oe J 
In this example, halting the search leaves no side effect, so the command button should be labeled Cancel. 


Time remaining 
© 2010, Microsoft Corporation. All rights reserved. Page 137 of 882 


For determinate progress bars: 


- Use the following time formats. Start with the first of the following formats where the largest time unit isn't zero, and then change to 
the next format once the largest time unit becomes zero. 


For progress bars: 


If related information is shown in a colon format: 
Time remaining: h hours, m minutes 

Time remaining: m minutes, s seconds 

Time remaining: s seconds 


If screen space is at a premium: 
h hrs, m mins remaining 

m mins, s secs remaining 

s seconds remaining 


Otherwise: 

h hours, m minutes remaining 
m minutes, s seconds remaining 
s seconds remaining 


For title bars: 
hh:mm remaining 
mmi:ss remaining 
0:ss remaining 


This compact format shows the most important information first so that it isn't truncated on the taskbar. 
- Make estimates accurate, but don't give false precision. If largest unit is hours, give minutes (if meaningful) but not seconds. 


Incorrect: 
hh hours, mm minutes, ss seconds 


- Keep the estimate up-to-date. Update time remaining estimates at least every 5 seconds. 


- Focus on the time remaining because that is the information users care about most. Give total elapsed time only when there are 
scenarios where elapsed time is helpful (such as when the task is likely to be repeated). If the time remaining estimate is associated 
with a progress bar, don't have percent complete text because that information is conveyed by the progress bar itself. 


- Be grammatically correct. Use singular units when the number is one. 


Incorrect: 
1 minutes, 1 seconds 


- Use sentence-style capitalization. 


Progress bar colors 


- Use red or yellow progress bars only to indicate the progress status, not the final results of a task. A red or yellow progress bar 
indicates that users need to take some action to complete the task. If the condition isn't recoverable, leave the progress bar green 
and display an error message. 


- Turn the progress bar red when there is a user recoverable condition that prevents making further progress. Display a message to 
explain the problem and recommend a solution. 


- Turn the progress bar yellow to indicate either that the user has paused the task or that there is a condition that is impeding 
progress but progress is still taking place (as, for example, with poor network connectivity). If the user has paused, change the Pause 
button label to Resume. If progress is impeded, display a message to explain the problem and recommend a solution. 


Meters 


- Use progress bars only for progress. Use meters to indicate percentages that aren't related to progress. 
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Recommended sizing and spacing 


Minimum size 


3 DLUs (5 pixels) :s:zc22:: 
9 DLUs (15 pixels) ee 
——————— 


107 DLUs (160 pixels) 
Maximum size 


3 DLUs (5 pixels) ::5-22--:25: 
9 DLUs (15 pixels) ———————— 
————————————SS5585855——0—00—{=aaS="— 


237 DLUs (355 pixels) 


Recommended sizing and spacing for progress bars. 


- Always use the recommended progress bar height. 
o Exception: You may use a different height if the parent window doesn't support the recommended height. 


- Use the minimum width if you want to make the progress bar unobtrusive. 
- Don't use widths longer than the maximum recommended. The progress bar doesn't have to fill the available space. 
- Center the progress bar horizontally if the window is much wider than the maximum recommended width. 


Labels 
Progress bar labels 


Use a concise label with a static text control to indicate what the operation is doing. Start the label with a verb (for example, 
Copying) and end with an ellipsis. This label may change dynamically if the operation has multiple steps or is processing multiple 
objects. 


Don't assign a unique access key because the control isn't interactive. 


Use sentence-style capitalization. 


If the operation was not directly initiated by the user, you can include an additional label to give the context and apologize for the 
interruption. Start this extra label with the phrase, Please wait while. This label should not change during the operation. 


Le los 


Please wait while Windows connects to the “Microsoft” network. 


In this example, the user is being asked to please wait because the user didn't directly initiate the operation. 
- Position the label above the progress bar and align the label with the left edge of the progress bar. 
Progress bar details 


- Provide details in static text, preceding the data with a label ending with a colon. Specify units (seconds, kilobytes, and so on) after 
the details text. 


Correct: 
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Install_Messenger.exe from download.microsoft.com 
Estimated time left: 33 sec (1.56MB of 18.0MB copied) 
Download to: Temporary Folder 

Transfer rate: 20KB/ sec 


In this example, the details are properly labeled. 


Incorrect: 
—— ee 
33 sec 


1.56MB/18.0MB 
20KB/sec 


In this example, the details aren't labeled, thus requiring users to determine their meaning. 


- Use sentence-style capitalization. 
- Position the details below the progress bar and align the label with the left edge of the progress bar. 
- Don't give the percentage completed or remaining because that information is conveyed by the progress bar itself. 


Cancel button 


- Label the button Cancel if canceling returns the environment to its previous state (leaving no side effect); otherwise, label the button 
Stop to indicate that it leaves the partially completed operation intact. 


- You can change the button label from Cancel to Stop in the middle of the operation if at some point it isn't possible to return the 
environment to its previous state. 


Progress dialog box titles 


- If the progress bar is displayed in a modal dialog box, the dialog box title should be the name of the program or the name of the 
operation. Don't use what should be the progress bar label for the dialog box title. 


Correct: 


sj Outlook Send/Receive Progress 


2 of 4 Tasks have completed successfully 


rr 
|W] Don't show this dialog box during Send/Receive 


In this example, the task name is used for the dialog box title. 


Incorrect: 
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Waiting for Response from Sever... 


Connecting to backup server... 
Time elapsed: 1 minute 53 seconds 


Fabrikam Backup server may be down or running very slowly, 
check your server status and network connectivity, or try again 
later. 


In this example, the dialog box title text is a restatement of the progress bar label. The program name should be 
used instead. 


- Ifthe progress bar is displayed in a modeless dialog box, optimize the title for display on the taskbar by concisely placing the 
distinguishing information first. Example: "66% Complete." 
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Progressive Disclosure Controls 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
General 
Interaction 
Presentation 
Chevrons 
Arrows 
Recommended sizing and spacing 
Labels 
Documentation 


With a progressive disclosure control, users can show or hide additional information including data, options, or 
commands. Progressive disclosure promotes simplicity by focusing on the essential, yet revealing additional 
detail as needed. 


™) (A)vy> BEB «a vA” « 


Examples of progressive disclosure controls. 


Note: Guidelines related to layout, menus, and toolbars are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 


- Do users need to see the information in some but not all scenarios, or some but not all of the time? If so, displaying the 
information using progressive disclosure simplifies the baseline experience, yet allows users to access the information easily. 


sosssvsnansuvensnsnsusunsvanenssnsvansuesvanensusevsnanausstavansnsnssvsnanessanensnsnsavanensvensnensessnsnansenenensuanessanensussssnansssansnsnsnssssnsnasssnsnenensenseenensanensaeneyy 


Firewall 

Automatic updating One® 
Malware protection One® ty 
Other security settings OKs iv 


In this example, Security Center displays the important security status all the time, but uses progressive disclosure 
to display details on demand. 


- If the information is displayed by default, are users ever likely to choose to hide it? Are there scenarios where users will need 
more space? Are users sufficiently motivated to customize the user interface (UI)? If not, display the information without using 
progressive disclosure. 


Incorrect: 
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At Work | Developer | IT Professional | Partner | Small Business 


In this example, users won't be motivated to hide the information. 


Is the additional information advanced, substantial, complex, or related to an independent subtask? If so, consider displaying 
the information in a separate window using command buttons or links instead of using a progressive disclosure control. 
(Additional information is advanced if it is intended for advanced users. It's complex if it makes other information hard to read or 


lay out.) 
Do you want to run this file? 
‘iz i Name: D:\Users\Jonathan\Desktop\Install Messenger.exe 
Publisher: Microsoft Corporation 


In this example, information about the software's name and publisher is meaningful primarily to advanced users, 
So links to separate windows are used. 


Is the additional information a sentence or sentence fragment that describes what an item does or how it can be used? If so, 
consider using a tooltip or infotip. 


Is the additional information related to the current task, but independent of the currently displayed information? If so, consider 
using tabs instead. However, collapsible lists are often preferable to tabs because they are more flexible and scalable. 


Is showing or hiding the additional information essentially a data filter? If so, consider using a drop-down list or check boxes 
instead to apply the filter to the entire list. 


Design concepts 
The goals of progressive disclosure are to: 


- Simplify a UI by focusing on the essential, yet revealing additional detail as needed. 
- Simplify a Ul's appearance by reducing the perception of clutter. 


Both goals can be achieved by using progressive disclosure controls, where users click to see more detail. 
However, you can achieve the second goal of simplifying the appearance without using explicit progressive 
disclosure controls by: 


- Showing contextual detail only in context. For example, you can show contextual commands or toolbars automatically when 
relevant to the selected object or mode. 


- Reducing the weight of affordances for secondary UI. Affordances are visual properties that suggest how objects are used. The 
trend is to have UI that users can interact with in place, but to have all such UI drawn to scream "click me!" leads to too much 
visual clutter. For secondary UI, it is often better to use subtle affordances and give the full effects on mouse over. 


WW The Posies 
> we The Posies 


In this example, the Rating field is interactive, but doesn't appear so until mouse hover. 


- Showing follow-up steps only after prerequisites are done. This approach is best used with familiar tasks where users can 
confidently take the first steps. 
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Type a user name (for example, John): 
Jonathan 


Type a password (recommended): 


Retype your password: 


Type a password hint (optional): 
1234 


In this example, the user name and password page initially shows only the user name and optional password 
boxes. The confirmation and hint boxes are displayed after the user enters a password. 


While progressive disclosure is a great way to simplify Uls, it has these risks: 


- Lack of discoverability. Users may assume that if they can't see something, it doesn't exist. Users may not hover or click if they 
don't see what they are looking for. There is always a chance that users might not click things like M ore options. 


- Lack of stability. Progressive disclosure should be expected or at least feel natural. If controls unexpectedly appear and disappear, 
the resulting UI can feel unstable. 


Progressive disclosure controls 


Progressive disclosure controls are usually displayed without direct labels that describe their behavior, so users 
must be able to do the following based on the control's visual appearance alone: 


- Recognize that the control provides progressive disclosure. 

- Determine if the current state is expanded or collapsed. 

- Determine if additional information, options, or commands are needed to perform the task. 
- Determine how to restore the original state, if desired. 


While users can determine the above by trial and error, you should try to make such experimentation 
unnecessary. 


Progressive disclosure controls have a fairly weak affordance, which means their visual properties suggest how 


they are used, albeit weakly. The following table compares the appearance of the common progressive disclosure 
controls: 


Control Purpose Appearance Glyph indicates 


Chevrons Show all: Show or hide the Chevrons point inthe direction Future state 
ee remaining items in completely —_|where the action will occur. 
or partially hidden content. 


ww Ss Items are either shown in place 
(using a single chevron) orina 
pop-up menu (using a double 
chevron). 
Arrows 


Show options: Show a pop-up 
command menu. 


Arrows point in the direction Future state 


where the action will occur. 


=e 


Plus and minus controls |Expand containers: Expand or 


Plus and minus symbols don't Future state 


qo collapse container content in point, but the action always 
— place when navigating through —_joccurs to their right. 
a hierarchy. 
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Rotating triangles 


Show details: Show or hide Rotating triangles somewhat Present state 


‘ additional information in place _|resemble rotating levers, so they 


for an individual item. They are /point in the direction where the 
also used to expand containers. action has occurred. 


If you do only one thing... 
Users should be able to predict a progressive disclosure control's behavior correctly by inspection alone. To 


achieve this, select the appropriate usage patterns and apply their appearance, location, and behavior 
consistently. 


Usage patterns 
Progressive disclosure controls have several usage patterns. Some of them are built into common controls. 
Chevrons 


Chevrons show or hide the remaining items in completely or partially hidden content. Usually the items are 
shown in place, but they can also be shown in a pop-up menu. When in place, the item stays expanded until the 
user collapses it. 


Chevrons are used in the following ways: 


In-place UI 
The associated Firewall One® WwW 
object receives = 
ci ons and @ Windows Firewall is actively protecting your computer. 

e single 
chevron is Note: Two or more firewalls running at the same time can conflict 


activated with 
the space bar. 


with each other. 
How does a firewall help protect my computer? 


[Ritomatic updating aie E = a 
Malware protection On® y) 
Other security settings OKe & 


In these examples, the in-place single chevrons are positioned to the right of their associated control. 


Command 
buttons with 
external labels 
The command 
button receives 


Internet Explorer - Security Warning 


Do you want to run this software? 


input focus and ca Name: Windows Live Messenger 
the single Publisher: Microsoft Corporation 
chevron is 


activated with 
the space bar. 


[run [_ Dont Run | 


(¥) More options 


a) While files from the Internet can be useful, this file type can potentially harm 
7 your computer. Only run software from publishers you trust. What's the risk? 
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In this example, the single chevron button is labeled and positioned to the left of the label. With this pattern, the 
button would be difficult to understand without its label. 


Command 
buttons with More >> |_<< Less 

internal labels 

The command 

button receives Inthese examples, regular command buttons have the double chevron positioned to suggest their meaning. 
input focus and 

is activated with 

the space bar. 


Arrows 


Arrows show a pop-up command menu. The item stays expanded until the user makes a selection or clicks 
anywhere. 


If the arrow button is an independent control, it receives input focus and is activated with the space bar. If the 
arrow button has a parent control, the parent receives input focus and the arrow is activated with Alt+down 
arrow and Alt+up arrow keys, as with the drop-down list control. 


Arrows are used in the following ways: 


Separate buttons 


The arrow isina Lm av 
separate button bi cai 
control. Item Directory 


Item File Name 
; Item Extension 

he Current Line 

Current Column 


. Current Text 


Change my display picture... 
Create dynamic display picture 


View my contact card 
View profile 


Size » 


Hide 


In these examples, separate arrow buttons positioned to the right indicate a command menu. 
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Command 
buttons Open |v 
The arrow is part 


of acommand Open ly, 


button. Ly 
Open |:? Search options... 
Open read-only fad) Modify Index Locations... 
[===] 
Open as copy Search Pane 


Open in browser 
Open with transform 


Open and repair 


Show previous versions 


In these examples, menu buttons and split buttons have the arrows positioned to the right of the text. 


Plus and minus controls 


Plus and minus controls expand or collapse to show container content in place when navigating through a 
hierarchy. The item stays expanded until the user collapses it. Although these look like buttons, their behavior is 
in-place. 


The associated object receives input focus. The plus is activated with the right arrow key, and the minus with the 
left arrow key. 


Plus and minus controls are used in the following ways: 


Collapsible trees = 5 ..98) Jonathan 
A multi-level =), Batteries 
peace Me AC dat 
eontents pot J Microsoft ACPI-Compliant Control Method Battery 
()-{& Computer 
sq Disk drives 
ce) Display adapters 
a DVD/CD-ROM drives 


In this example, the plus and minus controls are positioned to the left of the associated container. 


Collapsible lists Accessibility 


A two-level 
hierarchy to a 


show container © Behavior 
content. AllowDrop False 
AutoValidate EnablePreventFocusChange 
ContextMenuStrip (none) 
DoubleBuffered False 
Enabled True 
ImeMode NoControl 


In this example, the plus and minus controls are positioned to the left of the associated list header. 


Rotating triangles 
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Rotating triangles show or hide additional information in place for an individual item. They are also used to 
expand containers. The item stays expanded until the user collapses it. 


The associated object receives input focus. The collapsed (right-pointing) triangle is activated with the right arrow 
key, and the expanded (downward-pointing) triangle with the left arrow key. 


Rotating triangles are used in the following ways: 


Collapsible trees = 4 BN Desktop 


A multi-level = 
i » Jonath 
hierarchy to : cae 
show container 4} Public 
content. tb Public Documents 


a Public Downloads 
Mf Public Music 
Public Pictures 
Public Videos 
)) Recorded TV 
4;™ Computer 
ca Local Disk (C:) 
&, New Volume (D:) 
©® DVD Drive (F:) DVDVolume 
&Y Network 
Control Panel 
‘© Recycle Bin 


In this example, the rotating triangles are positioned to the left of the associated container. 


Collapsible lists = S/DHCP Server 


A two-level Description: Select this role to provide automatic IP addressing for clients on 
hierarchy to your network. 
show additional Required services: DHCP Server, COM+ Event System, System Event 
information in Notification 

lace. 
P ¥) DDNS Server 


< 


> Domain Controller 


In this example, the rotating triangles are positioned to the left of their associated list items. 


Preview arrows 


Like chevrons, additional information is shown or hidden in place. The item stays expanded until the user 


collapses it. Unlike chevrons, the glyphs have a graphical representation of the action, typically with an arrow 
indicating what will happen. 


Ae 


In these examples from Windows M edia®Player, the glyphs have arrows that suggest the action that will happen. 


Preview arrows are best reserved for situations where a standard chevron doesn't adequately communicate the 
control's behavior, such as when the disclosure is complex or there is more than one type of disclosure. 


Guidelines 
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General 


- Select the progressive disclosure pattern based on its usage. For a description of each usage pattern, see the previous table. 


- Don't use links for progressive disclosure controls. Use only the progressive disclosure controls presented in the Usage patterns 
section. However, do use links to navigate to Help topics. 


Correct: 


(~) Show color mixer 


Incorrect: 


Show color mixer 


In the incorrect example, a link is used to show more options in place. This usage would be correct if the link 
navigated to another page or dialog box, or displayed a Help topic. 


Interaction 


- For chevrons and arrows that aren't directly labeled, use tooltips to describe what they do. 


Search Inbox 


Expand the Query Builder 


In this example, the tooltip indicates the effect of an unlabeled chevron control. 


If a user expands or collapses an item, make the state persist so it takes effect the next time the window is displayed, unless 
users are likely to prefer starting in the default state. Make the state persist on a per-window, per-user basis. 


Make sure that all expanded content can be collapsed and vice versa, and that the inverse operation is obvious. Doing so 
encourages exploration and reduces frustration. The best way to make the inverse operation obvious is to keep the control in the 
same fixed location. If you need to move the control, keep it in the same relative location within a visually distinct area. 


Incorrect: 


Find what: UXGuide 


Find what:  UXGuide 
Replace with: | 
In this example, clicking the Replace button with the chevron reveals the Replace with text box. Once this is done, 


the Replace expander becomes the Replace command, so there is no way to restore the original state. 


Use only the access keys appropriate for the progressive disclosure pattern, as listed in the Usage patterns section. Don't use 
Enter to activate progressive disclosure. 


Presentation 
- Don't use triangular-shaped arrowheads for a purpose other than progressive disclosure. 


Incorrect: 
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> Control Panel Home 


Classic View 


Although this example isn't a progressive disclosure pattern, using an arrow here suggests that commands will be 
shown in a popup window. 


Correct: 


e Control Panel Home 


Classic View 


In this example, a bullet is correctly used instead. 


- Remove (don't disable) progressive disclosure controls that don't apply in the current context. Progressive disclosure controls 
should always deliver on their promise, so remove them when there isn't more information to give. 


Incorrect: 


(Mw) More options 


In this example, a progressive disclosure control that doesn't apply is incorrectly disabled. 
Chevrons 


- Use single chevrons to show or hide in place. Use double chevrons to show or hide using a pop-up menu. You should always use 
double chevrons for command buttons with internal labels, however. 


Correct: 
( v) More options 


Incorrect: 


(¥) More options 


In the incorrect example, a double chevron is used for in-place progressive disclosure. 


Correct: 


More >> 


In this example, a double chevron is used for in-place progressive disclosure because it is a command button with 
an internal label. 


Provide a visual relationship between the chevron and its associated control. Because in-place chevrons are placed to the right 
of their associated UI and right aligned, there can be quite a distance between a chevron and its associated control. 


Correct: 


Media sharing © Off ( v ) 


In this example, there is a clear relationship between the in-place chevron and its associated UI. 
Incorrect: 
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Media sharing © Off 


In this example, there is no clear visual relationship between the in-place chevron and its associated UI, so it 


seems to be floating in space. 


Arrows 


- Don't use arrow graphics that could be confused with Back, Forward, Go, or Play. Use simple triangular-shaped arrowheads 


(arrows without stems) on neutral backgrounds. 


Correct: 


vy > 


These arrows are clearly progressive disclosure controls. 


Incorrect (for progressive disclosure): 
¢ > 


These arrows don't look like progressive disclosure controls. 


Incorrect (for Back, Forward): 


These arrows look like progressive disclosure controls, but they are not. 


Recommended sizing and spacing 


Chevron: 


13 DLUs (20 pixels) 3 DLUs (5 pixels) 


S ee | 


12 DLUs (20 pixels) q ORCS 


5 DLUs (8 pixels) 
3 DLUs (5 pixels) —- « 


5 DLUs (7 pixels) 
3 DLUs (5 pixels) —- A 


Arrow: 
14 DLUs (21 pixels) 


13 DLUs (22 pixels) ic [>] 


5 DLUs (7 pixels) 
3 DLUs (4 pixels) sell » 


Plus/minus: 


7 DLUs (10 pixels) 


6 DLUs (10 pixels) or! | 
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Rotating: 


4 DLUs (6 pixels) 


4 b-— 6 DLUs (9 pixels) 


Recommended sizing and spacing for progressive disclosure controls. 


Labels 


For chevrons on a command button with an external label: 
o Assign a unique access key. For assignment guidelines, see Keyboard. 


o Use sentence-style capitalization. 
o Write the label as a phrase and use no ending punctuation. 
o Write the label so that it describes the effect of clicking the button, and change the label when the state changes. 


o If the surface always displays some options, commands, or details, use the following label pairs: 
= More/ Fewer options. Use for options or a mixture of options, commands, and details. 


= More/ Fewer commands. Use for commands only. 
= More/ Fewer details. Use for information only. 
= More/ Fewer <object name>. Use for other object types, such as folders. 


o Otherwise: 
= Show/Hide options. Use for options or a mixture of options, commands, and details. 


= Show/Hide commands. Use for commands only. 
= Show/Hide details. Use for information only. 
= Show/Hide <object name>. Use for other object types, such as folders. 
For chevrons on a command button with an internal label, follow the standard command button label guidelines. 


Documentation 


When referring to progressive disclosure controls: 


If the control has a fixed label, refer to the control by its label only; don't try to describe the control. Use the exact label text, 
including its capitalization, but don't include the access key underscore. 


If the control has no label or it isn't fixed, refer to the control by its type: chevron, arrow, triangle, or plus/minus button. If 
necessary, also describe the control's location. If the control appears dynamically, such as the page space control, start the 
reference by describing how to make the control appear. 


Example: To display the files within a folder, move the pointer to the start of the folder name, and then click the 
triangle next to the folder. 


Don't refer to the control as a button, unless to contrast with other progressive disclosure controls that aren't buttons. 
To describe user interaction, use click. If needed for clarity, use click...to expand or collapse. 
When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


Examples: 


(For a chevron) To determine the file size, click Details. 
(For an arrow) To see all the options, click the arrow next to the Search box. 
(For plus/minus) To view your picture, click Pictures. 
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Radio Buttons 


Is this the right control? 
Guidelines 

General 

Subordinate controls 

Default values 
Recommended sizing and spacing 
Labels 
Documentation 


With a radio button, users make a choice among a set of mutually exclusive, related options. Users can choose 
one and only one option. Radio buttons are so called because they function like the channel presets on radios. 


@ Display as a link 
f Display as a menu 
©"Don't display this item 

A typical group of radio buttons. 


A group of radio buttons behaves like a single control. Only the selected choice is accessible using the Tab key, 
but users can cycle through the group using the arrow keys. 


Note: Guidelines related to layout and keyboard navigation are presented in a separate article. 


Is this the right control? 
To decide, consider these questions: 
- Isthe control used to choose one option from a set of mutually exclusive choices? If not, use another control. To choose 


multiple options, use check boxes, a multiple-selection list or a check box list instead. 


- Isthe number of options between two and seven? Since the screen space used is proportional to the number of options, keep 
the number of options in a group between two and seven. For eight or more options, use a drop-down list or single-selection list. 


- Would a check box be a better choice? If there are only two options, you could use a single check box instead. However, check 
boxes are suitable only for turning a single option on or off, whereas radio buttons can be used for completely different 
alternatives. If both solutions are possible: 

o Use radio buttons if the meaning of the cleared check box isn't completely obvious. 
Incorrect: 


("| Landscape 


Correct: 


@ Landscape 
© Portrait 


In the correct example, the choices are not opposites so radio buttons are the better choice. 


o Use radio buttons on wizard pages to make the alternatives clear, even if a check box is otherwise acceptable. 


o Use radio buttons if you have enough screen space and the options are important enough to be a good use of that screen 
space. Otherwise, use a check box or drop-down list. 
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Incorrect: 


® Show this message again 
© Don't show this message again 


In this example, the options aren't important enough to use radio buttons. 
Correct: 
[-] Don't show this message again 
In this example, a check box is an efficient use of screen space for this peripheral option. 


o Use acheck box if there other check boxes on the page. 


- Would a drop-down list be a better choice? If the default option is recommended for most users in most situations, radio 
buttons might draw more attention to the options than necessary. 
o Consider using a drop-down list if you don't want to draw attention to the options, or you don't want to encourage users 
to make changes. A drop-down list focuses on the current selection, whereas radio buttons emphasize all options equally. 


Colors: 


‘Highest (32 bit) + 


In this example, a drop-down list focuses on the current selection and discourages users from making changes. 


o Consider a drop-down list if there are other drop-down lists on the page. 


Would a set of command buttons, command links, or a split button be a better choice? If the radio buttons are used only to 
affect how a command is performed, it is often better to present the command variations instead. Doing so allows users to 
choose the right command with a single interaction. 


Do the options present program options, rather than data? The options' values shouldn't be based on context or other data. For 
data, use a drop-down list or single-selection list. 


If the control is used on a wizard page or control panel, is the control a response to the main instruction and can users later 
change the choice? If so, consider using command links instead of radio buttons to make the interaction more efficient. 


Are the values non-numeric? For numeric data, use text boxes, drop-down lists, or sliders. 


Guidelines 
General 


- List the options in a logical order, such as most likely to be selected to least, simplest operation to most complex, or least risk to 
most. Alphabetical ordering is not recommended because it is language dependent and therefore not localizable. 


- If none of the options is a valid choice, add another option to reflect this choice, such as None or Does not apply. 
- Prefer to align radio buttons vertically instead of horizontally. Horizontal alignment is harder to read and localize. 


Correct: 


@ Left 
© Center 
D Right 


In this example, the radio buttons are aligned vertically. 


Incorrect: 
© Left Center © Right 
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In this example, the horizontal alignment is harder to read. 


- Reconsider using group boxes to organize groups of radio buttons—this often results in unnecessary screen clutter. 
- Don't use radio button labels as group box labels. 


- Don't use the selection of a radio button to: 
o Perform commands. 


o Display other windows, such as a dialog box to gather more input. 
o Dynamically show or hide other controls related to the selected control (screen readers cannot detect such events). 
However, you can change text dynamically based on the selection. 


Subordinate controls 


- Place subordinate controls to the right of or below (indented, flush with the radio button label) the radio button and its label. End 
the radio button label with a colon. 


© Never 
@ After period of time (in seconds): 


In this example, the radio button and its subordinate control share the radio button label and its access key. In this 
case, the arrow keys move focus from the radio button to its subordinate text box. 


- Leave dependent editable text boxes and drop-down lists enabled if they share the radio button's label. When users type or 
paste anything into the box, select the corresponding option automatically. Doing so simplifies the interaction. 


Page range 

@ All 

© Current page S 
© Pages: 


lection 


t 
mM 
m 


ia! 


{ 


Type page numbers and/or page 
ranges separated by commas counting 
from the start of the document or the 
section. For example, type 1, 3, 5-12 
or pisi, pis2, pis3—p8s3 


In this example, entering a page number automatically selects Pages. 


- Avoid nesting radio buttons with other radio buttons or check boxes. If possible, keep all the options at the same level. 


Correct: 
© Let Internet Explore decide how pop-ups should open 
@ Always open pop-ups in a new window 


© Always open pop-ups in a new tab 


In this example, the options are at the same level. 


Incorrect: 
© Let Internet Explore decide how pop-ups should open 
@ Always open pop-ups: 
@ In a new window 
© In a new tab 


In this example, using nested options adds unnecessary complexity. 
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- If you do nest radio buttons with other radio buttons or check boxes, disable these subordinate controls until the high-level 
option is selected. Doing so avoids confusion about the meaning of the subordinate controls. 


Default values 


- Because a group of radio buttons represents a set of mutually exclusive choices, always have one radio button selected by 
default. Select the safest (to prevent loss of data or system access) and most secure and private option. If safety and security 
aren't factors, select the most likely or convenient option. 

Exceptions: Don't have a default selection if: 
o There is no acceptable default option for safety, security, or legal reasons and therefore the user must make an explicit 
choice. If the user doesn't make a selection, display an error message to force one. 


o The user interface (UI) must reflect the current state and the option hasn't been set yet. A default value would 
incorrectly imply that the user doesn't need to make a selection. 


o The goal is to collect unbiased data. Default values would bias data collection. 


o The group of radio buttons represents a property in a mixed state, which happens when displaying a property for 
multiple objects that don't have the same setting. Don't display an error message in this case since each object has a valid 
state. 


- Make the first option the default option, since users often expect that—unless that order isn't logical. To do this, you might need 
to change the option labels. 


Incorrect: 
Apply policy: 
» Now 
@ Later 


In this example, the default option isn't the first option. 


Correct: 
Policy: 
@ Apply later 
© Apply now 


In this example, the option labels are reworded to make the first option the default option. 


Recommended sizing and spacing 


3 DLUs (5 pixels) 
4 DLUs (7 pixels) 


)Radio1 fT 10 DLUs (17 pixels) 


Recommended sizing and spacing for radio buttons. 
Labels 
Radio button labels 


- Label every radio button. 
- Assign a unique access key to each label. For assignment guidelines, see Keyboard. 


- Use sentence-style capitalization. 
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Write the label as a phrase, not as a sentence, and use no ending punctuation. 
o Exception: If a radio button label also labels a subordinate control that follows it, end the label with a colon. 


Use parallel phrasing, and try to keep the length about the same for all labels. 


Focus the label text on the differences among the options. If all the options have the same introductory text, move that text to 
the group label. 


Use positive phrasing. For example, use do instead of do not, and print instead of do not print. 


Describe just the option with the label. Keep labels brief so it's easy to refer to them in messages and documentation. If the 
option requires further explanation, provide the explanation in a static text control using complete sentences and ending 
punctuation. 


(@® On (recommended) 


This setting blocks all outside sources from connecting to this 
computer, except for those unblocked on the Exceptions tab. 


~) Off 


Avoid using this setting. Turning off Windows Firewall will make this 
computer more vulnerable to hackers or malicious software. 


In this example, the options are explained using separate static text controls. 


Note: Adding an explanation to one radio button doesn't mean that you have to provide explanations for all the 
radio buttons. Provide the relevant information in the label if you can, and use explanations only when necessary. 
Don't merely restate the label for consistency. 


If an option is strongly recommended, add "(recommended)" to the label. Be sure to add to the control label, not the 
supplemental notes. 


If an option is intended only for advanced users, add "(advanced)" to the label. Be sure to add to the control label, not the 
supplemental notes. 


If you must use multi-line labels, align the top of the label with the radio button. 


Don't use a subordinate control, the values it contains, or its units label to create a sentence or phrase. Such a design isn't 
localizable because sentence structure varies with language. 


Radio button group labels 


Use the group label to explain the purpose of the group, not how to make the selection. Assume that users know how to use 
radio buttons. For example, don't say "Select one of the following choices". 


All radio button groups need labels. Write the label as a word or phrase, not as a sentence, ending with a colon using static text 
or a group box. 


Exception: Omit the label if it is merely a restatement of a dialog box's main instruction. In this case, the main 
instruction takes the colon (unless it's a question) and access key (if there is one). 


Acceptable: 


Select an alignment 
Alignment: 


© Align left 
© Center 
@ Align right 


In this example, the radio button group label is just a restatement of the main instruction. 


Better: 
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Select an alignment: 
© Align left 

© Center 

@ Align right 


In this example, the redundant label is removed, so the main instruction takes the colon. 


- Don't assign an access key to the label. Doing so isn't necessary and it makes the other access keys harder to assign. 
o Exception: If not all controls can have unique access keys, you can assign an access key to the label instead of the 
individual controls. For more information, see Keyboard. 


Documentation 
When referring to radio buttons: 


- Use the exact label text, including its capitalization, but don't include the access key underscore or colon. 


- In programming and other technical documentation, refer to radio buttons as radio buttons. Everywhere else use option buttons, 
especially in user documentation. 


- To describe user interaction, use click. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent 
confusion. 


Example: Click Current page, and then click OK. 
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Search Boxes 


Is this the right control? 
Design concepts 
Guidelines 
Location 
Look 
Interaction 
Functionality 
Recommended sizing and spacing 
Text 
Documentation 


With a Search box, users can quickly locate specific objects or text within a large set of data by filtering or 
highlighting matches. There is no standard search control, but you should strive to make your program's search 
features consistent with those of Windows® 


There are two types of searches: 


- Instant search, where the results are displayed immediately as the user types. No button needs to be clicked, so the magnifying 


glass search symbol is shown as a graphic, not a button. 


Prompt 


Search symbol 


= Map network drive 


A typical Search box using Instant search. Search is automatically executed on every keystroke. 


- Regular search, where a search is performed when the user clicks the search button. The magnifying glass search symbol is shown on 


a button. 


ClipArt 
Search for: 
| Ptel— search button 


A typical Search box using regular search. Users click a button to perform the search. 


You can provide either or both kinds of search options for your users. 


Is this the right control? 
To decide, consider these questions: 


- Are specific objects difficult to find? This can happen when: 
o There are many objects. 


o The objects aren't located in a single location. Search is especially useful for finding objects in trees. 
o The search data is difficult to find (for example, metadata). 
- Do users need to find specific text within documents? 


- Does your feature return relevant search results within five seconds? If not, you can provide a search feature, but use an 
alternative design that gives visible feedback to accommodate long-running searches, such as a search dialog box. 


Design concepts 


Searching is a crucial first step in many scenarios: Users must find objects before they can use them. Users are 
saving more and more objects on increasingly larger hard disks, but browsing for objects doesn't scale well. 
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Search must be a simple, consistent, reliable part of the user experience. 
Search boxes in Windows: 


- Are part of all Explorer windows, so they are easy to find and recognize. 
- Have consistent appearance and behavior. 
- Are efficient and fast, giving instant results in Instant search mode. 


A Search box is used in Windows in these places: 


- Explorers 

- Experiences (Microsoft ®Windows M edia®Player, Windows®Photo Gallery, Windows Internet Explorer® 
- Start menu (to find programs and recent files) 

- Control Panel home page (to find control panel items and tasks) 

- Help (to find relevant Help topics) 


Look and feel 


The feel of Search in Windows is significantly enhanced by supporting Instant search. Having instant results 
makes Windows feel more powerful and direct. 


In Windows Explorers and application windows, Search is located in the upper-right corner if it is a supplemental 
entry point. In this case, users look for a search mechanism when they don't find what they are looking for in the 
window. However, if Search is the primary entry point, it is centered at the top of the window. 


The Search button is visually connected to a Search box. To minimize space, an optional prompt is used inside a 
Search box instead of a label. The prompt may be an instruction (for example, Type to search) or indicate the 
scope of the search (for example, Search for pictures). 


Without labels and separate buttons, Instant search in Windows has a lightweight look. 


Performing a successful search creates a virtual page of the search results and adds it to the Back stack and 
Address bar. Users have several ways to restore the original page and clear a Search box, including clicking Back, 
clicking the original page in the Address bar, pressing Esc, or clearing the Search box. 


Users can also simply clear the Search box without restoring a previous page of results. In Instant search mode, a 
clear button appears after the user starts typing; an "x" replaces the magnifying glass search symbol. On hover, 
the "x" gets a button look and can be clicked. 


© Map network drive 


The user can clear the Search box by clicking "x" at the right end of the control. 


In regular search mode, the clear button is optional. Users may find it useful, for example, if a search is taking a 
long time to complete. Users can click the "x" to stop the search in progress. If a search has already completed, 
users can click the "x" to clear the Search box. 


Guidelines 
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Location 


- For application windows, locate Search in the upper-right corner. 
- For popup windows, locate Search wherever is most sensible and convenient. 
- Exception: If Search is usually the first thing users do in a window (the primary entry point), center it at the top of the window. 


Look 


- Use the standard search button graphics. There are three versions: 
o Magnifying glass search symbol only (no button on hover). Use for Instant search. 


o Magnifying glass search symbol with button. Use when button needs to be clicked to start the search. 


o Magnifying glass search symbol with button and drop-down arrow. Add a drop-down arrow when users can change the scope or 
when other settings are available. 
= For Instant search, use a drop-down arrow only, and show a button on hover. 


= For regular search, show the drop-down arrow on a button. 


Rest state Search Pp P+ 
With insertion point | i : 2\s 
Type to search the current view 

Hover state R ae Pp rR 

Down state Pp P- m2 
Clear house x x v 

Hover clear ed lil eget mess 

pom cer —Efroud Td Tieden 


Visual specifications for Instant search. 


Rest state———|Search |] [Ail 
With insertion point SS 
Type to search the current view 
Hover state house IR T&F | Aly 
Down state a Te ak 
Clear house x -|eolrl 
Hover clear [rou it lage _lalyl 
Down clear a Tyr leek 


Visual specifications for regular search. 


- Don't use a label; use an optional prompt instead. If users tend to assume that the search is a generic file search, use the prompt to 
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give the scope. Otherwise, use Type to search or a similar, concise phrase. 


In these examples, brief textual prompts help users work with Search. 
Interaction 


- On input focus, automatically select any previously entered text. Doing so allows users to enter a new search by typing, or to 
modify the previous search by positioning the caret using the arrow keys. 


Web Images Video News Maps MSN Morey 


PY) Live search search 


In this example, previously entered text is selected on input focus. 


- Assign the keyboard shortcut for the Search box to be Ctrl+E. For more information about keyboard shortcut assignments, 
see Windows Keyboard Shortcut Keys. 


Functionality 


Support Instant search whenever possible. Provide both regular and Instant searches if there are scenarios where regular searching 
is worth the extra wait time. 


Regular searches must return relevant results within five seconds and Instant search must return results within two seconds. After 
this point, Search may continue to fill in less relevant results over time as long as the program is responsive and users can perform 
other tasks. You may have to index your search data to ensure this responsiveness. 


If you provide both regular and Instant search modes, the Instant search results must be a subset of the regular search results. 


All searching is prefix-based (no substring or suffix searching). The use of trailing wildcard characters is optional and doesn't affect 
the results. If multiple words are entered, use OR searching. 


- A successful search adds a virtual page with the search results to the Back stack and Address bar. M ultiple searches result in a 
single virtual page, so clicking Back always returns the original page. 


If necessary for scale, rank the search results by relevance. 
- A blank search returns the original page. 


Recommended sizing and spacing 


Actual control size: 


125 DLUs (187 pixels) 


Search Pp IT 15 DLUs (24 pixels) 


Visible size: 


123 DLUs (185 pixels) 


15 DLUs (24 pixels) 


The visible size is smaller than the 


control size because there is a 


Search Fo) ll 13 DLUs (22 pixels) transparent 1 pixel border around the 


outside of the control. 
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Recommended sizing and spacing for Instant search. 


Actual control size: 


125 DLUs (187 pixels) 


[ Search [2 | 15 DLUs (24 pixels) 


Visible size: 


123 DLUs (185 pixels) 


15 DLUs (24 pixels) 


The visible size is smaller than the 


Search 2 i 13 DLUs (22 pixels) control size because there is a 
os 


transparent 1 pixel border around the 
outside of the control. 


17 DLUs (26 pixels) 


Recommended sizing and spacing for regular search. 


Text 


- For the wording of the prompt in the Search box, either make it an instruction (for example, Type to search) or indicate the scope of 
the search (for example, Search for pictures). 


- Prompt text should be brief. A single word or short phrase should suffice. 
- Use sentence-style capitalization. 


- Don't use ending punctuation or ellipsis. 


Documentation 


- Refer to this control as the Search box. Capitalize the initial letter of the first word; don't capitalize the initial letter of box. 


- Refer to the two types of search as Instant search and regular search. Capitalize the initial letter of Instant search; don't capitalize 
the initial letter of regular search. 
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Sliders 


Is this the right control? 
Guidelines 

Recommended sizing and spacing 
Labels 

Documentation 


With a slider, users can choose from a continuous range of values. A slider has a bar that shows the range and an 
indicator that shows the current value. Optional tick marks show values. 


Slider 
Bar 
| |_| 


| 
Tick marks 


A typical slider. 


Note: Guidelines related to layout are presented in a separate article. 


Is this the right control? 


Use a slider when you want your users to be able to set defined, contiguous values (such as volume or 
brightness) or a range of discrete values (such as screen resolution settings). 


A slider is a good choice when you know that users think of the value as a relative quantity, not a numeric value. 
For example, users think about setting their audio volume to low or medium—not about setting the value to 2 or 
5: 


To decide, consider these questions: 


- Does the setting seem like a relative quantity? If not, use radio buttons, or a drop-down or single-selection list. 
- Is the setting an exact, known numeric value? If so, use a numeric text box. 


- Would a user benefit from instant feedback on the effect of setting changes? If so, use a slider. For example, users 
can choose a color more easily by immediately seeing the effect of changes to hue, saturation, or luminosity values. 


- Does the setting have a range of four or more values? If not, use radio buttons. 


- Can the user change the value? Sliders are for user interaction. If a user can't ever change the value, use a read-only 
text box instead. 


If a slider or a numeric text box is possible, use a numeric text box if: 


- Screen space is tight. 
- Auser is likely to prefer using the keyboard. 


Use a slider if: 
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Users will benefit from instant feedback. 


Guidelines 


Use a natural orientation. For example, if the slider represents a real-world value that is normally shown vertically 
(such as temperature), use a vertical orientation. 


Orient the slider to reflect the culture of your users. For example, Western cultures read from left to right, so for 
horizontal sliders, put the low end of the range on the left and the high end on the right. For cultures that read from 
right to left, do the opposite. 


Size the control so that a user can easily set the desired value. For settings with discrete values, make sure the user 
can easily select any value using the mouse. 


Consider using a non-linear scale if the range of values is large and users will likely select values at one end of the 
range. For example, time value might be 1 minute, 1 hour, 1 day, or 1 month. 


Whenever practical, give immediate feedback while or after a user makes a selection. For example, the Microsoft® 
Windows®volume control beeps to indicate the resulting audio volume. 


Use labels to show the range of values. 


Exception: If the slider is vertically oriented and the top label is Maximum, High, More, or equivalent, you can omit the 
other labels since the meaning is clear. 


In this example, the slider's vertical orientation makes the range labels unnecessary. 


Use tick marks when users need to know the approximate value of the setting. 


Use tick marks and a value label when users need to know the exact value of the setting they choose. Always use a 
value label if a user needs to Know the units to make sense of the setting. 


Resolution: 
Low High 


1680 by 1050 pixels 


In this example, a label is used to clearly indicate the selected value. 


For horizontally-oriented sliders, place tick marks under the slider. For vertically-oriented sliders, place tick marks to 
the right for Western cultures; for cultures that read from right to left, do the opposite. 


Place the value label completely under the slider control so that the relationship is clear. 


Incorrect: 
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Hardware acceleration: None } Full 


All accelerations are enabled. Use this setting if your computer has no 
problems. (Recommended) 


In this example, the value label isn't aligned under the slider. 


When disabling a slider, also disable any associated labels. 


Don't use both a slider and a numeric text box for the same setting. Use only the more appropriate control. 
Exception: Use both controls when the user needs both immediate feedback and the ability to set an exact numeric 
value. 


Don't use a slider as a progress indicator. 


Don't change the size of the slider indicator from the default size. 


Incorrect: 


None Fast 


In this example, a size smaller than the default is used. 


Correct: 


None 7 Fast 


In this example, the default size is used. 


Don't label every tick mark. 


Recommended sizing and spacing 
3 DLE © poaek) 


8; ] 15 DLUs (24 pixels) 


Recommended sizing and spacing for sliders. 
Labels 
Slider labels 


- Use a static text label ending with a colon, or a group box label with no ending punctuation. 
- Assign a unique access key to each label. For assignment guidelines, see Keyboard. 
- Use sentence-style capitalization. 


- Position the slider label either to the left of the slider, or above and aligned with the left edge of the slider (or its left 
range identifier, if present). 
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Range labels 


- Label the two ends of the slider range, unless a vertical orientation makes this unnecessary. 

- Use only word, if possible, for each label. 

- Don't use ending punctuation. 

- Make sure these labels are descriptive and parallel. Examples: M aximum/M inimum, M ore/ Less, Low/High, Soft/Loud. 
- Use sentence-style capitalization. 

- Don't assign access keys. 


Value labels 
- If you need a value label, display it below the slider. 
- Center the text relative to the control and include the units (such as pixels). 
Resolution: 


Low || High 


1680 by 1050 pixels 


In this example, the value label is centered under the slider and includes the units. 
Documentation 
When referring to sliders: 


- Use the exact label text, including its capitalization, and include the word slider. Don't include the access key 
underscore or colon. 


- To describe user interaction, use move. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent 
confusion. 


Example: To increase your screen resolution, move the Screen resolution slider to the right. 
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Spin Controls 


Is this the right control? 
Guidelines 
General 
Values 
Labels 
Documentation 


With a spin control, users can click arrow buttons to change incrementally the value within its associated numeric 
text box. The term spin box refers to the combination of a text box and its associated spin control. 


oe box 


Sl- Up/Down arrow buttons 


A typical spin box. 


Users often prefer spin controls because they can make changes without moving their hands from the mouse. 
When the spin control is paired with a text box, users can type or paste input directly in the text box, so use of 
the spin control is optional. 


While spin controls are used for numeric input, the input doesn't have to be a pure whole number. The input can 
be decimal numbers and it can have negative signs, delimiters (such as colons or hyphens), and unit modifiers. 


Note: Guidelines related to text boxes and layout are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 


- Is the control used for numeric input? If not, use another control, such as a drop-down list or slider, to select from a fixed set of 
values. Use scroll bars for scrolling. 


- Do users think of the value as a relative quantity, not a numeric value? If so, use a slider instead. Use spin boxes only for exact, 
known numeric values. For example, users think about setting their audio volume to low or medium—not about setting the value 
to 2or5. 


- Is the control paired with a text box? If not, don't use. Spin controls shouldn't be used alone or with other types of controls 
besides a text box. 


Incorrect: 


9) 


In this example, a spin control is used to control a dynamic graphic. 


- Are contiguous value ranges valid? If not, use a drop-down list of valid values instead. 
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Number of disk drives: 


i— | 


OOM & Nh 


In this example, not all disk drive numbers are valid, so a drop-down list is a better choice. 


- Isusing the spin control practical? Using a spin control is practical for: 
o Entering a small number, typically under 100. 


o Making small changes to an existing or default value. 
While spin controls can be used for any numeric input, they are inefficient in situations other than these. 


- Is the spin control helpful? Is the control used in a context where users are likely to be using their mouse? If not, consider a spin 
control optional. 


- Are the sibling controls drop-down lists? If there are other drop-down lists, consider using a drop-down list for consistency. 


Decimal symbol: 


No. of digits after decimal: a) 
Digit grouping symbol: : 

Digit grouping: he 
Negative sign symbol: : 

Negative number format: : 

Display leading zeros: 

List separator: , aa 
Measurement system: U.S. + 


Standard digits: 0123456789 = 


Click Reset to restore the system default settings for 
numbers, currency, time, and date. 
In this example, a spin box could be used, but a drop-down list is used for consistency. 


- Are touch or pen users a primary target? If so, consider using a drop-down list instead. The arrow buttons in a spin control are 
too small to be used efficiently with touch or a pen. 


If a slider or a spin box is possible, use a spin box if: 


- Screen space is tight. 
- Auser is likely to prefer using the keyboard. 


Use a slider if: 


- Users will benefit from instant feedback. 
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Guidelines 
General 
- Use spin controls whenever they are practical and helpful. See Is this the right control? 
o Exception: To be consistent with other text boxes on the same user interface (UI), use spin controls even if they aren't 


always practical. 


Correct: 
Month: | Day: fa] Year: | 


In this example, a spin control is used with the year control for consistency, even though it isn't always practical. 


Incorrect: 
@ Use the following IP address: 
IP address: 255.255 .255.0 


In this example, the spin control is unusable. 
- Always make a spin control the "buddy" of the text box. Doing so places the spin control inside the text box. 


Correct: 
Calendar 
When a two-digit year is entered, interpret it as a year between: 


1930 and = 


Incorrect: 
Calendar 
When a two-digit year is entered, interpret it as a year between: 
1930 and = 


¥ 


In the correct example, the spin control is placed inside its associated text box. 


- Disable a spin control when its associated text box is disabled. The spin control is a supplemental input method—never the only 
input method. 


Values 
- Define the top button to increase the value by one unit and the bottom button to decrease by one unit. Typically, the unit is 


one, but it should be the smallest common change in value. Ideally, the spin control should cover all valid values, and it should be 
more convenient than typing in the text. 


Margins 
Top: 1" + Bottom: 1" > 
Left: 1" + Right: 1" + 
Gutter: 0" = Gutter position: Left 7) 


In this example, clicking a spin control changes the values by .1, which is the smallest common change in value. 
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Using a smaller unit would cover the range of valid values but make the spin controls unusable. 


- Use the spin control to limit input to valid values. Using a spin control should never result in an incorrect value. 


- At the end of a range of valid values, restart the range. The spin control metaphor is that the user is spinning a wheel of values, 
hence this wheel-like behavior. 
o Exception: Don't restart the range if the resulting value is certain to be incorrect. 


Number of copies: 1 +] 


In this example, clicking the down arrow button doesn't restart the range (by going to the maximum value) 
because that value is certain to be incorrect. 


- Use text instead of special numeric values. Allow users to spin to these special values instead of having to know them and type 
them in. 


& Sleep 
& Sleep after 


On battery (Minutes): BGG + 


Plugged in: Never 


In this example, Never is a special value but users can spin to it. 


- If the value has delimiters, the associated text box should have multiple input focus points. Doing so allows the numeric 
segments to be manipulated individually. 


3: 34 AM + 


In this example, the spin control affects the values for hours, minutes, seconds, and A.M ./P.M.—whichever has the 
focus. 


- If the value has units, use the spin control to change those units as well. 
3; 02: 346] /+ 


In this example, the spin control can be used to change units. 
Labels 


- Apply the text box labeling guidelines to label the associated text box. Spin controls are never labeled directly. 


Documentation 
When referring to spin controls: 


- Don't refer to spin controls in user documentation. Instead, refer to the label of the associated text box. 
- Refer to spin controls and spin boxes only in programming and other technical documentation. 


Example: In the Date box, type or select the part of the date you want to change. 
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Status Bars 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
General 
Presentation 


Icons 


Interaction 


Text 


Documentation 


A status bar is an area at the bottom of a primary window that displays information about the current window's 
state (such as what is being viewed and how), background tasks (such as printing, scanning, and formatting), or 
other contextual information (such as selection and keyboard state). 


Status bars typically indicate status through text and icons, but they can also have progress indicators, as well as 
menus for commands and options related to status. 


Download Full Items 
Download Headers and then Full Items 


| ¥ Download Headers 
¥ On Slow Connections Only Download Headers 
Work Offline 


Updating Inbox (257 KB). | Connected to Microsoft Exchange * . 
po 


Number of items Progress Status with menu Resize grabber 


A typical status bar. 


Note: Guidelines related to the notification area are presented in a separate article. 


Is this the right user interface? 


To decide, consider these questions: 


Is the status relevant when users are actively using other programs? If so, use a notification area icon. 


Does the status item need to display notifications? If so, you must use a notification area icon. 


Is the window a primary window? If not, don't use a status bar. Dialog boxes, wizards, control panels, and property sheets 
shouldn't have status bars. 


Is the information primarily status? If not, don't use a status bar. Status bars must not be used as a secondary menu bar or 
toolbar. 


Does the information explain how to use the selected control? If so, display the information next to the associated control using 
a supplemental explanation or instruction label instead. 


Is the status useful and relevant? That is, are users likely to change their behavior as a result of this information? If not, either 
don't display the status, or put it in a logfile. 


Is the status critical? Is immediate action required? If so, display the information in a form that demands attention and cannot be 
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easily ignored, such as a dialog box or within the primary window itself. 


A red address bar in Windows®Internet Explorer ® 


- Isthe program intended primarily for novice users? Inexperienced users are generally unaware of status bars, so reconsider the 
use of status bars in this case. 


Design concepts 


Status bars are a great way to provide status information without interrupting users or breaking their flow. 
However, status bars are easy to overlook. So easy, in fact, that many users don't notice status bars at all. 


The solution to this problem isn't to demand the user's attention by using garish icons, animation, or flashing, but 
to design for this limitation. You can do this by: 


- Making sure that the status information is useful and relevant. If not, don't provide a status bar at all. 


- Not using status bars for crucial information. Users should never have to know what is in the status bar. If users must see it, don't 
put it in a status bar. 


If you do only one thing... 
Make sure that the status bar information is useful and relevant but not crucial. 


Usage patterns 


Status bars have several usage patterns: 


phil window | ocation: Pictures (C:\Users\Public) 119 KB jt Computer 


Show the source . 

of what is being _!n this example, the status bar displays the path to the document. 
displayed along 

with any view 

modes. 


Progress 
Show the 
progress of 
background In this example, the status bar includes a progress bar to show the Web page loading into a Windows Internet 
tasks, either with Explorer window. 

a determinate 

progress bar or 

an animation. 


Waiting for http://www.microsoft.com/en/us/ default.aspx... 


= 


Contextual joesiocceee 
information : 
Show contextual | 

! 


information 

about what the : 
user is currently 
doing. 


78x67 


In this example, Microsoft Paint shows the selection size in pixels. 
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Guidelines 
General 


- Consider providing a View Status Bar command if only some users will need the status bar information. Hide the status bar by 
default if most users won't need it. 


- Don't use the status bar to explain menu bar items. This help pattern isn't discoverable. 
Presentation 


Disable modal status that doesn't apply. M odal status includes keyboard and document states. 


Remove non-modal status that doesn't apply. 


Present status information in the following order: current window status; progress; and contextual information. 


Icons 


Choose easily recognizable status icon designs. Prefer icons with unique outlines over square or rectangular shaped icons. 


Use swaths of pure red, yellow, and green only to communicate status information. Otherwise, such icons are confusing. 


Correct: 


ca 


10:10 AM 


Incorrect: 


ce) 10:10 AM 


In the incorrect example, the red icon unintentionally suggests an error, creating confusion. 


Use icon variations or overlays to indicate status or status changes. Use icon variations to show changes in quantities or strengths. 
For other types of status, use these standard overlays: 


Overlay |Status 
A Warning 
(@ lero 


Blocked/ Offline 


x) 
x Disabled/ Disconnected 
9 


Don't change status too frequently. Status bar icons shouldn't appear noisy, unstable, or demand attention. The eye is sensitive to 
changes in the peripheral field of vision, so status changes need to be subtle. 


- For icons that provide important status information, prefer in-place labels. 
- Unlabeled status bar icons should have tooltips. 


For more information, see Icons. 


Interaction 


- Make a status bar area interactive to allow users direct access to related commands and options. 
o Use a control that looks and behaves like a menu button or a split button. These status bar areas must have a drop-down 
arrow to indicate that they are clickable. 


o Display the menu on left-click on mouse down, not mouse up. 


o Don't support right-clicking or double-clicking. Users don't expect such interactions in a status bar, so they aren't likely to 
attempt them. 


- Display tooltips on hover. 
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Text 


Generally, use concise labels. Cut any text that can be eliminated. 


Prefer sentence fragments, without ending punctuation. Use full sentences (with ending punctuation) only when sentence 
fragments aren't significantly shorter. 


For optional progress labels, indicate what the operation is doing with a label that starts with a verb (gerund form) and ends with 
an ellipsis. For example: "Copying...". This label may change dynamically if the operation has multiple steps or is processing 
multiple objects. 


Don't use color, bold, or italic to emphasize status bar text. 


For tooltip phrasing guidelines, see Tooltips and Infotips. 


Documentation 


Refer to status bars as status bars, not status lines or other variations. Example: "The current page number is 
displayed on the status bar." 
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Tabs 


Is this the right control? 
Usage patterns 
Guidelines 

General 

Interaction 


Icons 


Dynamic window surface pattern 
Multiple views and documents patterns 
Exclusive options pattern 


Labels 


Documentation 


Tabs provide a way to present related information on separate labeled pages. 


Buttons |Pointers | Pointer options | Wheel | Hardware | 


A typical set of tabs. 


Tabs are usually associated with property windows (and vice versa), but tabs can be used in any type of window. 


Tab controls represent the tabbed manila folders used to organize information in filing cabinets commonly found 
in the United States. (Manila folders aren't used worldwide.) 


Note: Guidelines related to layout, tab menus, dialog boxes, and property windows are presented in separate 
articles. 


Is this the right control? 


To decide, consider these questions: 


Can the controls comfortably fit on a single, reasonably sized page? If so, use a single page. 
Is there only one tab? If so, use a single page. 


Are the tabs related to each other in some obvious way? If not, consider splitting the information into separate windows of 
related information. 


If used for settings, are settings on different pages completely independent? Will changing a setting on one page affect settings 
on other pages? If they're not independent, use task pages or a wizard instead. 


Are the tabs mostly peers of each other, or is there a hierarchical relationship? If hierarchical, consider using progressive 
disclosure or child dialog boxes to show related information. 


Are the tabs used to display steps within a task? You can use "tabs" to display steps within a task only if they are presented to 
look like steps, and there is an obvious, alternative way to get to the text step, such as a Next button. Otherwise, if the steps are 
required, use pages in a page flow or a wizard. If the steps are optional, display the optional steps using modal dialog boxes 
instead. 


Are the tabs different views of the same data? If so, consider using a split button or drop-down list to change views. While tabs 
can be used effectively for changing views, the alternatives are more lightweight. 


Usage patterns 


Tabs have several usage patterns: 
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Dynamic With this pattern, using tabs is conceptually similar to placing all the information on the tabs linearly on a single 


window surface scrollable surface, with the tab labels as headings. 
Like scroll bars, 


tabs can be used 

to increase the Suton | Porters | Porte ations | Wheel | Harare 
window surface 

area to show 


related In this example, tabs effectively increase the window surface area. 
information. 


Multiple views 
Like split buttons 
or drop-down 
lists, tabs can be 
used to show 
different views 
of the same or 


related 
information. 
AiSplit El code QPreview | < 
0:01@56Kbps 430x110 
In this example, tabs change views within a document. 
Multiple Se 
documents 88|* \ ey Windows... X | \ MSN.com a Windows Live 
Like multiple 


windows, tabs 
canbeusedto ¢ March 2005 / April 2005 / May 2005 },Month Template / 

show different 
documents ina 
single window. 


In these examples, tabs show different documents within a single application window. 


Exclusive options 
Like radio 
buttons, tabs 

can be used to 


present multiple Location | Data | Messages | 


exclusive Break at: 


choices. In this [OO >| 


pattern, only the 
Click the Condition button if you 


selected tab 


applies and all want to set conditional EditGode 
other tabs are parameters for your breakpoint. = 
ignored. 


Breakpoints: 
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In this example, tabs are used (incorrectly) as a substitute for radio buttons. 


This pattern is not recommended because it uses a nonstandard behavior. The tabs behave as a setting instead 
of purely a way to navigate within the window. 


If you do only one thing... 


Make sure the information on the tabs is related, yet settings on different pages are independent. The last tab 
selected should have no special meaning. 


Guidelines 
General 


. Use horizontal tabs if: 
o The window has seven or fewer tabs. 


o All the tabs fit on one row, even when the user interface (UI) is localized. 


. Use vertical tabs if: 
o The property window has eight or more tabs. 


o Using horizontal tabs would require more than one row. 


Options 


Personal 
Personal 


My display name 
Type your name as you want others to see it: 


——e 


Type a personal message for your contacts to see: 


[Fortesting purposes only. 


|W] Show song information from Windows Media Player as a personal 
message 


My display picture 


[¥] Show my display picture and allow = 
others to see it Change Picture... 


My public profile 
Create or modify public profile (the 
seers sk ooasack ak cieees come ace Eck profile 
My status 
[¥] Show me as "Away" when I'm inactive: 10 minutes 


|¥| Show me as “Busy” and block my alerts when I'm running a 
full-screen program, such as a slide presentation 


My webcam 
|\¥| Allow others to see that | have a webcam 


Pool 


In this example, vertical tabs accommodate eight or more tabs. 


- Don't nest tabs or combine horizontal tabs with vertical tabs. Instead, reduce the number of tabs, use only vertical tabs, or use 
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another control such as a drop-down list. 
- Don't scroll horizontal tabs. Horizontal scrolling isn't readily discoverable. You may scroll vertical tabs, however. 


Incorrect: 


General | Debug C/C++ — Link | Resourct 


In this example, the horizontal tabs are scrolled. 


- Fortabs on a resizable window or pane, put a scrollbar, when needed, on the page, not the window or pane. The tabs should 
always be visible and not scroll out of view. 


<Search> ~ 8 


a) 4@ mscorlib | 4 
4@ System 

~(@ System.Data 

42 System.Deployment 

~@ System.Drawing 


42 System.Windows.Forms 
+42 System.Xml 

} WindowsApplication2 

4 Forml 


{} My 


G}--- Ge} ~~} --}--}-- 


a 
~~ 


[+}---e} 


a Solution Explorer Bz Class View 


In this example, the tab page has the scrollbar, not the pane. 
- Make sure the tabs look like tabs and not another type of control. 


Incorrect: - 


si Favorites) Feeds eal [| | 


| 
In this example, these tabs look like command buttons. 
Interaction 


When controls apply only to a page, place them within the border of the tabbed page. 


When controls apply to the entire window, place them outside the tabbed page. 


Don't assign effects to changing tabs. Tabs must be accessible in any order. Changing the current tab should never have side 
effects, apply settings, or result in an error message. 


Don't assign a special meaning to the last tab selected. Tab selection is for navigation—the user's last tab selection isn't a setting. 


Don't make the settings on a page dependent on settings on other pages. Put any dependent settings on the same page instead. 


If users are likely to start with the last tab displayed, make the tab persist and select it by default. M ake the settings persist on a 
per-window, per-user basis. Otherwise, select the first page by default. 
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Icons 


- Don't put icons on tabs. Icons usually add unnecessary visual clutter, consume screen space, and often don't improve user 
comprehension. Only add icons that aid in comprehension, such as standard symbols. 


Incorrect: 


System Properties 


(Computer name | Gl Hardware | BspAdvanced | €5) System protection | 


Windows uses the following information to identify your computer 


le on the network. 


In this example, the icons add visual clutter and do little to improve user comprehension. 


Exception: You can use clearly recognizable icons if there might be insufficient space to display meaningful labels: 


Correct: 


Hig Se... [SQ To... |G Err... |5Pr... |[@YSo... |FZ CL... 
In this example, the window is so narrow that icons better communicate the tabs than the labels. 
- Don't use product logos for tab graphics. Tabs aren't for branding. 


Dynamic window surface pattern 


Don't use scroll bars on tab pages. Tabs function similarly to scroll bars—to increase the effective area of a window. One 
mechanism should be sufficient. 


Use concise tab labels. Use one or two words that clearly describe the content of the page. Longer labels consume screen space, 
especially when the labels are localized. 


Use specific, meaningful tab labels. Avoid generic tab labels that could apply to any tab, such as General, Advanced, or Settings. 


If a tab doesn't apply to the current context and users don't expect it to, remove it. Doing so simplifies the Ul and users won't 
miss it. 


Incorrect: 
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Startup Task Pane 


Highlight 

Bookmarks 
Status bar 
Screentips 


Formatting marks 


Tab characters 


[] Spaces 


[| Paragraph marks 


[W) Smart tags 

(¥] Animated text 

(¥] Horizontal scroll bar 
| Vertical scroll bar 


[-] Picture placeholders 


[] Hidden text 
[] Optional hyphens 
all 


Track changes 


File locations 


[¥] Windows in Taskbar 
[| Field codes 
Field shading: 
‘When selected [| 


Print and Web Layout options 
[¥] Drawings \V| White space between pages (Print view only) 
[F) Object anchors [F) Background colors and images (Print view only) 
["] Text boundaries V] Vertical ruler (Print view only) 


Outline and Normal options 
Wrap to window Style area width: = /0" 
[] Draft font: Name: |Courier New 


In this example, the File Locations tab is incorrectly disabled when M icrosoft ®W ord is used as an e-mail editor. 
Rather than disabling this tab, it should be removed because users wouldn't expect to view or change file 
locations in this context. 


- Ifa tab doesn't apply to the current context and users might expect it to: 
o Display the tab. 


o Disable the controls on the page. 
o Include text explaining why the controls are disabled. 


Don't disable the tab, because doing so isn't self-explanatory and prohibits exploration. Users looking for a specific value would be 
forced to look on all other tabs. 
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int 


CO 
CO 


In this example, none of the View options apply in Reading Layout. However, users might expect them to apply 


Show 


Startup Task Pane 


|v} Highlight 


Bookmarks 


| Status bar 


¥] ScreenTips 


Formatting marks 


Tab characters 
Spaces 


Paragraph marks 


and web layout options 
] Drawings 


Object anchors 


|_| Text boundaries 


Outline and normal options 


Wrap to window 


Draft font: Name: (Courier New 


| Smart tags Windows in Taskbar 


|v] Animated text Field codes 
[¥] Horizontal scroll bar Field shading: 
When selected 


| Vertical scroll bar 


|_| Picture placeholders 


Hidden text 
Optional hyphens 
All 


| White space between pages (Print view only) 
[_] Background colors and images (Print view only) 


[¥] Vertical ruler (Print view only) 


Style area width: —‘|0" 


= 
[~] Size: [10 ~| 


i) These options do not apply in Reading Layout. 


Lox} [cancel] 


based on the tab label, so the page is displayed but the options are disabled. 


Multiple views and documents patterns 


. Use the view or document names on tab labels. 


- Avoid excessively long tab names. If necessary, either have a maximum name size or truncate the displayed tab label using 


ellipses. Longer labels consume screen space, especially when the labels are localized. 


- Ifatab doesn't apply to the current context, remove the tab. 


Exclusive options pattern 


- Don't use this pattern! Use radio buttons or a drop-down list instead. 


Incorrect: 
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Microsoft Office Excel 97-2003 Worksheet 
Microsoft Office Excel Binary Worksheet 
Microsoft Office Excel Chart 

Microsoft Office Excel Macro-Enabled Worksheet 


Microsoft Office Excel Worksheet 
Result 


" ee 
faa) Soom 


In this example, tabs are incorrectly used as a substitute for radio buttons. 


Correct: 


Open object 
© Create new object 
© Open object in a file 


Bitmap Image 


Inserts a new Bitmap Image object into your 
document. 


In this example, radio buttons are correctly used instead. 


Labels 
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- Label tabs based on their pattern. Use nouns rather than verbs, without ending punctuation. See the preceding pattern guidelines 
for more information. 


- Use sentence-style capitalization. 


- Don't assign an access key. Tabs are accessible through their shortcut keys (Ctrl+Tab, Ctrl+Shift+Tab, Ctrl+PgUp, Ctri+PgDn). There 
is a shortage of good access key choices, so not assigning access keys to tabs makes it easier to assign them to other controls. 


Documentation 
When referring to tabs: 


- Use the exact label text, including its capitalization, and include the word tab. 
- To describe user interaction, use click. 
- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 


- Because multiple uses can be ambiguous, especially for a worldwide audience, use the noun tab alone to refer only to a tab 
control. For other uses, clarify the meaning with a descriptor: the Tab key, a tab stop, or a tab mark on the ruler. 


Example: On the Tools menu, click Options, and then click the View tab. 
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Text Boxes 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
General 
Editable text boxes 
Numeric text boxes 
Password and PIN input 
Textual output 
Data output 
Input validation and error handling 
Prompts 
Recommended sizing and spacing 
Labels 
Documentation 


With a text box, users can display, enter, or edit a text or numeric value. 


Label —Display name: 


Text box— 


A typical text box. 


Note: Guidelines related to layout, fonts, and balloons are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 


- Isit practical to enumerate all the valid values efficiently? If so, consider a single-selection list, list view, drop-down list, editable 
drop-down list, or slider instead. 


- Isthe valid data completely unconstrained? Or is the valid data constrained only by format (constrained length or character types)? 
If so, use a text box. 


- Does the value represent a data type that has a specialized common control? Examples include date, time, or IPv4 or IPv6 address. 
If so, use the appropriate control, such as a date control rather than a text box. 


- If the data is numeric: 
o Do users perceive the setting as a relative quantity? If so, use a slider. 


o Would the user benefit from instant feedback on the effect of setting changes? If so, use a slider, possibly along with a text box. For 
example, users can easily choose a color using a slider because they can immediately see the effect of changes to hue, saturation, or 
luminosity values. 


Design concepts 


While text boxes have the benefit of being very flexible, they have the drawback of having minimal constraints. 
The only constraints on an editable text box are: 


- You can optionally set the maximum number of characters. 
- You can optionally restrict input to numeric characters (0 — 9) only. 
- If you use a spin control, you can limit spin control choices to valid values. 


Aside from their length and the optional presence of a spin control, text boxes don't have any visual clues that 
suggest the valid values or their format. This means relying on labels to convey this information to users. If users 
enter text that's not valid, you must handle the error with an error message. 


Asa general rule, you should use the most constrained control that you can. Use unconstrained controls like 
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text boxes as a last resort. That said, when you are considering constraints, bear in mind the needs of global 
users. For example, a control that is constrained to United States ZIP Codes isn't globalized, but an unconstrained 
text box that accepts any postal code format is. 


Usage patterns 


A text box is a flexible control with several possible uses. 


Data input 

A single-line, unconstrained 
text box used to enter or 
edit short strings. 


Formatted data input 

A set of short, fixed-sized, 
single-line text boxes used 
to enter data with a specific 
format. 


Assisted data input 

A single-line, unconstrained 
text box used to enter or 
edit strings, combined with 
a command button that 
helps users select valid 
values. 


Textual input 

A multi-line, unconstrained 
text box used to enter or 
edit long strings. 


Numeric input 

A single-line, numeric-only 
text box used to enter or 
edit numbers, with an 
Optional spin control to 
facilitate mouse-based 
input. 


Password and PIN input 

A single-line, unconstrained 
text box used to enter 
passwords and PINs 
securely. 


Display name: 


A single-line, unconstrained text box. 


Product key: 


A text box used for formatted data input. 


Note: The auto-exit feature automatically advances the input focus from one text box to the next. One 


disadvantage to this approach is that the data can't be copied or pasted as a single unit. 


Backup file location: 


In this example, the Browse command helps users select valid values. 


Address: 


A multi-line, unconstrained text box. 


Wait: 30 = minutes 


A text box used for numeric input. 


The combination of a text box and its associated spin control is called a spin box. 


Password: 


A text box used to enter passwords. 
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Data output Unlike static text, data displayed using a text box can be scrolled (useful if the data is wider than the control), 
A single-line, read-only text selected, and copied. 

box, always displayed 
without a border, used to i : , Sis 
display short strings. Location: C:\Desktop \Windows\UXGuide\Windows Vista Use 


Location: (eT MVWVindows Vista User Experience Guidelines 


A single-line, read-only text box used to display data. 


Textual output 

A multi-line, read-only text 

box used to display long When you sign in to People Near Me and then use a , 

strings. collaborative program such as Windows Meeting Space, a 
list of available people is displayed. (If no one is available, 
no names appear.) Display names, computer names, and 
IP addresses are the only pieces of information visible to 
everyone signed in to People Near Me. 


Privacy information: 


" 


Two people can have the same display name, so before 


A read-only text box used to display data. 


Guidelines 
General 


- When disabling a text box, also disable any associated labels, instruction labels, spin controls, and command buttons. 


- Use auto-complete to help users enter data that is likely to be used repeatedly. Examples include user names, addresses, and 
file names. However, don't use auto-complete for text boxes that may contain sensitive information, such as passwords, PINs, 
credit card numbers, or medical information. 


- Don't make users scroll unnecessarily. If you expect data to be larger than the text box and you can readily make the text box 
larger without harming the layout, size the box to eliminate the need for scrolling. 


Incorrect: 
Computer name: 


Jonathan-01.computer. 


In this example, the text box should be made much longer to handle its data. 


- Scroll bars: 
o Don't put horizontal scroll bars on multi-line text boxes. Use vertical scrolling and line wrapping instead. 


o Don't put any scroll bars on single-line text boxes. 
- For numeric input, you may use a spin control. For textual input, use a drop-down list or editable drop-down list instead. 
- Don't use the auto-exit feature except for formatted data input. The automatic shift of focus can surprise users. 


Editable text boxes 


- Limit the length of the input text when you can. For example, if the valid input isa number between 0 and 999, use a numeric text 
box that is limited to three characters. All parts of text boxes that use formatted data input must have a short, fixed length. 


- Be flexible with data formats. If users are likely to enter text using a wide variety of formats, try to handle all the most common 
ones. For example, many names, numbers, and identifiers can be entered with optional spaces and punctuation, and the 
capitalization often doesn't matter. 


- If you can't handle the likely formats, require a specific format by using formatted data input or indicate the valid formats in the label. 


Acceptable: 
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Serial number (example: 1234-56-7890): 


In this example, a text box requires input in a specific format. 


Better: 
Serial number: 
1234 56 7890 


In this example, the formatted data input pattern is used to require a specific format. 


Best: 
Serial number: 


In this example, a text box handles all likely formats. 


- Consider format flexibility when choosing the maximum input length. For example, a valid credit card number can use up to 
19 characters so limiting the length to anything shorter would make it difficult to enter numbers using the longer formats. 


- Don't use the formatted data input pattern if users are more likely to paste in long, complex data. Rather, reserve the formatted 
data input pattern for situations where users are more likely to type the data. 


IPv6 address: 


In this example, the formatted data input pattern isn't used, so that users can to paste IPv6 addresses. 


- Ifusers are more likely going to reenter the entire value, select all the text on input focus. If users are more likely to edit, place 
the caret at the end of the text. 


Password: 


In this example, users are more likely to replace than edit, so the entire value is selected on input focus. 


Tags: | Landscape; Add a tad | | D 


In this example, users are more likely to add keywords than replace the text, so the caret is placed at the end of 
the text. 


- Always use a multi-line text box if new-line characters are valid input. 
- When the text box is for a file or path, always provide a Browse button. 


Numeric text boxes 


- Choose the most convenient unit and label the units. For example, consider using milliliters instead of liters (or vice versa), 
percentages instead of direct values (or vice versa), and so on. 


Correct: 


Quantity (liters): 0.250 


In this example, the unit is labeled, but it requires users to enter decimal numbers. 


Better: 
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Quantity (milliliters): 250 


In this example, the text box uses a more convenient unit. 


- Use aspin control whenever it is helpful. However, sometimes spin controls aren't practical, such as when users need to enter 
many large numbers. Use spin controls when: 
o The input is likely to be a small number, typically under 100. 


o Users are likely to make a small change to an existing number. 
o Users are more likely to be using the mouse than the keyboard. 


- Right-align numeric text whenever: 
o There is more than one numeric text box. 


o The text boxes are vertically aligned. 
o Users are likely to add or compare the values. 


Correct: 
Airfare: 475.00 
Hotels: 229.35 
Meals: 161.78 
Total: 866.13 


In this example, the numeric text is right-aligned to make it easy to compare values. 


Incorrect: 
Red: 255 
Green: 0 


Blue: 255 


In this example, the numeric text is incorrectly left-aligned. 


- Always right-align monetary values. 


- Don't assign special meanings to specific numeric values, even if those special meanings are used internally by your 
application. Instead, use check boxes or radio buttons for an explicit user selection. 


Incorrect: 


Maximum cached objects (use -1 to disable caching): 


In this example, the value -1 has a special meaning. 


Correct: 
(¥] Caching 


Maximum cached objects: 


In this example, a check box makes the option explicit. 
Password and PIN input 


- Always use the password common control instead of creating your own. Passwords and PINs require special treatment to be 
handled securely. 
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For more guidelines and examples, see Balloons. 


Textual output 


- Consider using the white background system color for large, multi-line read-only text. A white background makes the text easier 
to read. Lots of text on a gray background discourages reading. 


For more information on background colors, see Fonts. 


Data output 


- Don't use a border for single-line, read-only text boxes. The border is a visual clue that the text is editable. 


- Don't disable single-line, read-only text boxes. This prevents users from selecting and copying the text to the clipboard. It also 
prevents users from scrolling the data if it exceeds the size of its boundaries. 


- Don't set a tab stop on single-line, read-only text box unless the user is likely to need to scroll or copy the text. 


Input validation and error handling 


Because text boxes are usually not constrained to accept only valid input, you may need to validate the input and 
handle any problems. Validate the various types of input problems as follows: 


- If the user enters a character that isn't valid, ignore the character and display an input problem balloon that explains the 
valid characters. 


Product key: 


al 


Incorrect character 
Anumber is the only valid character here. 


In this example, a balloon reports an incorrect input character. 


- Ifthe input data has a value or format that isn't valid, display an input problem balloon when the text box loses input focus. 


- Ifthe input data is inconsistent with other controls on the window, give an error message when the entire input is complete, such 
as when users click OK for a modal dialog box. 


Don't clear invalid input data unless users aren't able to correct errors easily. Doing so allows users to correct 
mistakes without starting over. For example, you should clear incorrect passwords and PINs because users can't 
correct them easily. 


For more guidelines and examples, see Error Messages and Balloons. 
Prompts 


A prompt is a label or short instruction placed inside a text box as its default value. Unlike static text, prompts 
disappear from the screen once users type something into the text box or it gets input focus. 


a | 


wy 
mm 
=] 


A typical prompt. 
Use a prompt when: 


- Screen space is at such a premium that using a label or instruction is undesirable, such as on a toolbar. 


- The prompt is primarily for identifying the purpose of the text box in a compact way. It must not be crucial information that the 
user needs to see while using the text box. 


Don 't BAK ompts just to direct users to type si omething or to click buttons. For example, don't write prompt text 
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that says Enter a filename and then click Send. 
When using prompts: 


- Draw the prompt text in italic gray and the actual input text in normal black. The prompt text must not be confused with real text. 
- Keep the prompt text concise. You can use fragments instead of full sentences. 

- Use sentence-style capitalization. 

- Don't use ending punctuation or ellipsis. 


- The prompt text should not be editable and should disappear once users click in or tab into the text box. 
o Exception: If the text box has default input focus, the prompt is displayed, and it disappears once the user starts typing. 


- The prompt text is restored if the text box is still empty when it loses input focus. 


Recommended sizing and spacing 


3 DLUs (5 pixels) 22:22:25: 


i {14 dius (23 pixels) 
1 Line 


3 DLUs (5 pixels) 22::2:ctoo:: 


+ 
li 24 DLUs (39 pixels) 


2 Line 
+ 10 DLUs (16 pixels) 


Recommended sizing and spacing for text boxes. 
The width of a text box is a visual clue of the expected input size. When sizing text boxes: 


- Choose a width appropriate for the longest valid data. In most situations, users shouldn't have to scroll the longest likely string 
they'll enter or view. 


- Include an additional 30 percent (up to 200 percent for shorter text) for any text (but not numbers) that will be localized. 
- Ifthe expected input has no particular size, choose a width that is consistent with the other text boxes or controls on the window. 
- Size multi-line text boxes to display an integral number of lines of text. 


Labels 
Text box labels 
- All text boxes need labels. Write the label as a word or phrase, not as a sentence, ending with a colon, and using static text. 
Exceptions: 


o Text boxes with prompts located where space is at a premium. 
o For labeling, a group of text boxes used for formatted data input should be treated as a single text box. 


o If atext box is subordinate to a radio button or check box, and is introduced by its label ending with a colon, don't put an additional 
label on the text box. 


o Omit control labels that restate the main instruction. In this case, the main instruction takes the colon (unless it's a question) and 
access key. 


Acceptable: 
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Enter your billing address 
Billing address: 


In this example, the text box label is just a restatement of the main instruction. 


Better: 


Enter your billing address: 


In this example, the redundant label is removed, so the main instruction takes the colon and access key. 


- Assign a unique access key. For access key assignment guidelines, see Keyboard. 
- Use sentence-style capitalization. 


- Position the label either to the left of or above the text box, and align the label with the left edge of the text box. If the label is on 
the left, vertically align the label text with the text box text. 


Correct: 
Name: 


Jonathan 


..Name:....Janathan 


In these examples, the label on top aligns with the left edge of the text box, and the label on the left aligns with 
the text in the text box. 


Incorrect: 


Name: 


Jonathan 


In these incorrect examples, the label on top aligns with the text in the text box, and the label on the left aligns 
with the top of the text box. 


- You may specify units (for example, seconds or connections) in parentheses after the label. 


« Ifa text box accepts an arbitrarily small maximum number of characters, you can state the maximum input in the label. The text 
box width should also suggest the maximum size. 


Password (maximum 8 characters): 


In this example, the label gives the maximum number of characters. 
© 2010, Microsoft Corporation. All rights reserved. Page 192 of 882 


« Don't make the content of the text box (or its units label) part of a sentence, because this is not localizable. 
- If the text box can be used to enter several items, make it clear how to separate the items in the label. 


User names (separate names with a semi-colon): 


In this example, the item separator is given in the label. 


- For guidelines on indicating required input, see Required input. 


Instruction labels 


- If you need to add instructional text about a text box, add it above the label. Use complete sentences with ending punctuation. 
- Use sentence-style capitalization. 


- Additional information that is helpful but not necessary should be kept short. Place this information either in parentheses between 
the label and colon, or without parentheses below the text box. 


Computer description: 


For example: "Kitchen Computer” or "Mary's 
Computer”. 


In this example, additional information is placed below the text box. 
Prompt labels 


- Keep the prompt text concise. You can use fragments instead of full sentences. 
- Use sentence-style capitalization. 
- Don't use ending punctuation or ellipsis. 


- Ifthe prompt directs users to enter information that will be acted upon by a button next to the text box, simply place the button next 
to the text box. Don't use the prompt to direct users to click the button (for example, don't write prompt text that says, Drag a file 
and then click Send). 


Documentation 
When referring to text boxes: 


- Use type to refer to user interactions that require typing or pasting; otherwise use enter if users can put information into the text 
box using other means, such as selecting the value from a list or using a Browse button. 


- Use select to refer to an entry in a read-only text box. 


- Use the exact label text, including its capitalization, and include the word box. Don't include the access key underscore or colon. 
Don't refer to a text box as a text box or a field. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 
Example: Type your password into the Password box, and then click OK. 


- If the text box requires a specific format, document only the most commonly used acceptable format. Let users discover any 
other formats on their own. You want to be flexible with data formats, but doing so should not result in complex documentation. 


Correct: 
Enter the part's serial number using the 1234-56-7890 format. 


Incorrect: 
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Enter the part's serial number using any of the following formats: 
1234567890 


1234-56-7890 
1234 56 7890 
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Tooltips and Infotips 


Is this the right control? 
Design concepts 
Usage pattems 
Guidelines 
Timeouts 
Placement 
Tooltips 
Infotips 
Start Menu infotips 
Quick Launch tooltips 
Control Panel infotips 
Icons 
Documentation 


A tooltip is a small pop-up window that labels the unlabeled control being pointed to, such as unlabeled toolbar 
controls or command buttons. 


| (my v :-p Page ¥ (Gp Tools v 


Print (Ctrl+P) 


A typical tooltip for a toolbar button. 


Because tooltips have proved so useful, a related control called infotips exists, which provides more descriptive 
text than is possible with tooltips. 


An infotip is a small pop-up window that concisely describes the object being pointed to, such as descriptions of 
toolbar controls, icons, graphics, links, Windows®Explorer objects, Start menu items, and taskbar buttons. 
Infotips are a form of progressive disclosure, eliminating the need always to have descriptive text on screen. 


E-mail RY pare 
Siz Share the selected files and folders 
with other people on the network. 


A typical infotip. 


For the purposes of this article, tooltips and infotips are referred to collectively as tips. 


Tips help users understand unknown or unfamiliar objects that aren't described directly in the user interface (Ul). 
They are displayed automatically when users hover the pointer over an object, and removed when users click the 
control or move the mouse, or when the tip times out. 


Developers: There is no infotip control; infotips are implemented with the tooltip control. The distinction is in 
usage, not implementation. 


Note: Guidelines related to balloons, toolbars, and Help are presented in separate articles. 


Is this the right control? 
To decide, consider these questions: 


- Is the information displayed based on pointer hover? If not, use another control. Display tips only as the result of user interaction 
—never display them on their own. By contrast, balloons can display on their own (as they do with notifications), so they have a tail 
that identifies their source. 

- Does a control have a text label? If not, use a tooltip to provide the label. Note that most controls should be labeled and therefore 
not have tooltips. Toolbar controls and command buttons with graphic labels should have tooltips. 
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Does an object benefit from a supplemental description or further information? If so, use an infotip. However, the text must 

be supplemental—that is, not essential to the primary tasks. If it is essential, put it directly in the UI so that users don't have to 
discover or hunt for it. 

Is the supplemental information an error, warning, or status? If so, use another UI element, such as a balloon, error message, or 
status bar. Notification area icon infotips are an exception because they can be used to show status information. 


Do users need to interact with the tip? If so, use another control, such as a balloon. Users can't interact with tips because moving 
the mouse makes them disappear. 


Do users need to print the supplemental information? If so, use another control, such as a static comment field. However, you can 
also use infotips to provide more direct access to this information. 


information? Comment [v1]: If so, use another control, 
such as a static comment field. However, you 


can also use infotips to provide more direct 
access to this information. 


In this example, a static comment field in Microsoft Word allows users to print comments. 


Is the context such that users might find the tips annoying or distracting? If so, consider using another solution—including 
doing nothing at all. If you do use tips in such contexts, allow users to turn them off. 


When used appropriately, tips improve communication with the user. Never use tips as a substitute for good 
design. If a graphic, button, or other object requires users to keep checking a tip to understand it, the design is 
bad. Fix the design instead. 


Design concepts 


Tips are a powerful way to simplify a user interface. They provide information users need when they need it, with 
minimal effort on their part. Tips can help you use screen space more effectively and reduce screen clutter. 
However, poorly designed tips can be annoying, distracting, unhelpful, overwhelming, or in the way. The 
following design concepts are intended to show the difference. 


Discoverability 


Tips display automatically when users hover the pointer over an object for a period of time. This time-delay 
mechanism makes tips very convenient, but it also reduces their discoverability. 


Over time, users learn that certain standard objects like toolbar buttons, graphic buttons, Start menu items, and 
notification area icons have tips, so you can take their discoverability for granted. 


It takes users longer to discover tips in nonstandard places. There is no visual clue, such as a hot spot or pointer 
change, that indicates that an object has a tip. Worse yet, some users move their mouse around a lot, especially 
when they are learning to navigate the UI. Users have to know that an object has a tip, either through past 
experience or by experimentation. 


You can improve discoverability by using tips consistently, which in turn fosters predictability. If you provide tips 
for some objects, you should provide them for all similar objects for which users are likely to want supplemental 
information. Sometimes doing so can be challenging, because you must also make sure that the tips are helpful 
and not obvious. 


If providing discoverable, consistently helpful tips proves to be a problem, consider alternative designs such as 
self-explanatory control labels or in-place supplemental text. 


Appropriate information 


Information appropriate for tips has the following characteristics: 


Concise. The pop-up windows used by tips are perfect for short sentences and sentence fragments, as well as formatted text. 
Large, unformatted blocks of text are difficult to read and overwhelming. 


Helpful. Tip text must be informative. It shouldn't be obvious or just repeat what is already on the screen. 


Supplemental. Because tip text isn't always visible, it should be supplemental information that users don't have to read. 
Important information should be communicated using self-explanatory control labels or in-place supplemental text. 


Static. Users don't expect tips to change from one instance to the next, so they are unlikely to notice changes in dynamic content, 
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such as status information. Notification area icon tips are a notable exception: Users are more likely to discover changes in 
tip information there because these icons primarily communicate status. 


Appropriate timeouts 


The appropriate automatic display and removal of tips is crucial to the goal of users maintaining control of their 
Ul environment. Tips have three timeout values: 


- Initial. The time the pointer must remain stationary for the tip to appear. The default time is 0.5 seconds. 
- Reshow. The time the pointer must remain stationary as the pointer moves from one target to another. The default time is 0.1 seconds. 
- Removal. The time after which the tip is automatically removed. The default time is 5 seconds. 


Having too short initial and reshow values results in an annoying, disruptive experience because they would often 
be shown inadvertently, whereas too long results in tips feeling unresponsive or not being discovered. The 
default removal time works well for short tip text, as used in tooltips. Infotips have longer text, so they need 
longer display times. 


Appropriate placement 


Tips should be placed near the object being hovered, usually at the pointer's tail or head if possible. However, 
they should never be placed in a way that interferes with what the user is doing by obscuring the object of 
interest. Preventing this problem might require you to move the tip away from the pointer but adjacent to the 
object. This isn't a problem as long as the relationship between the object and its tip is clear. M ake sure users 
don't move the pointer just to get your program's tips to go away. 


Accessibility 


Tips have an unusual effect on accessibility. While they are normally triggered by hovering the pointer over an 
object, tips are handled by screen readers for controls with keyboard access. When used appropriately for 
concise, helpful, static, supplemental information, tips can improve overall accessibility. In fact, the alt text tip 
pattern is the preferred way to make graphics accessible. However, when used inappropriately, they harm 
accessibility by making important or dynamic information harder to obtain. 


Provide more than one way to access a control if that control requires a tip that doesn't have keyboard access. 


Ask Options v 


In this example, users can print using the toolbar button (which isn't keyboard accessible) or the Print command 
keyboard shortcut. 


If you do only one thing... 
Design discoverable tips that display concise, helpful, static, supplemental information in the appropriate place at 
the appropriate time. 


Usage patterns 


Tips have several usage patterns: 


Tooltips Because these tips serve as labels, their text follows the label guidelines for the underlying control. 
Display the label of an 
unlabeled control or glyph. — 

lial 


we Export list 


In this example, the tooltip gives the command label. 
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In these examples, tooltips label graphic buttons. 


h 


In this example, the tooltip labels a glyph. 


Infotips Use infotips to describe or explain objects and controls such as toolbar controls, icons (including icon overlays), links, 
Provide a supplemental tabs, progressive disclosure controls, and custom controls. 

description or explanation 
of an object or control. 


—_—S 
Send the selected files as attachments 
in an e-mail message. 


In these examples, infotips provide supplemental information about controls and objects. 


Alt text infotips This pattern is primarily for users who have some form of vision impairment, and may be using a screen reader. 


Describe a graphic for 


accessibility. 


tek). 


In this example, the infotip describes the Start menu graphic. 


Thumbnails Thumbnails give an easily recognizable graphic representation of a window or document. 


Display a small image of an 
Control Panel 


item. 


a, 
|" Control Panel h 


In this example, the Windows®taskbar gives thumbnail tips for its items. 
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Detail infotips 
Display detailed 
information about an 
object. 


Start Menu infotips 
Describe an item on the 
Start menu. 


Sample Pictures - 4 items 


a 


Oryx Antelope.jpg 7/29/2007 10:10 AM 
4 Stars 290 KB (1024 x 768) 
Landscape: Sample; Wildlife 


In this example, Windows Photo Gallery gives thumbnail tips for its items. 


Infotips are an effective way to show detailed information about an object, or to provide data. 


‘” ” 
100 
is 7 
60 
m2 F| Type: JPEG Image 
Date taken: 7/29/2007 - 
ra F| Tags: Sample; Landscape 
Rating: 3 Stars - 
fe Dimensions: 1024 x 768 o+ : . Series "West" Point "3rd Qtr" 
Size: 258 KB Value: 34.6 
Ea Title: A creek running through the woods. 1st Qtr 2nd Qtr 3rd 


In these examples, infotips give detailed information about an object or data. 


The Start menu consists of program names and important Windows destinations, such as Documents, Pictures, and 
Control Panel. These tips describe Start menu items, typically by giving a brief description of the program or destination 
as well as the primary tasks users can perform with it. These descriptions are also indexed by the Start menu Search 
box, further helping users find the programs they need. 


Documents 


4 Paint 


In this example, the infotip describes what users can do with a program in the Start menu. 
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Control Panel infotips These tips provide supplemental information to help users choose the right Control Panel category and item. 
Describe a Control Panel 


category or task. 
Usertheco ints 
Wc — - 
“ ~| Change user account settings and 
passwords. 
In this example, the infotip describes the User Accounts Control Panel category. 
Full name infotips These tips allow you to display items in a more compact space, while reducing the need for horizontal scrolling. This is 
Display the fullname of an especially important when the content length is unknown because it is dynamic. Unlike the other patterns, when used 
item when the name is in lists and trees these tips are displayed directly over the source object. 
truncated or not fully 
visible. ©) Allow scripting of Internet Explorer web browser control 
@ Disable 
© Enable 
| Allow script-initiated windows without size of position constraints 
In this example, an infotip is used to display the full item name on hover. 
Status infotips Normally, tips should be static because users don't expect them to change from one instance to the next. Notification 


Display status information area icons are an exception because these icons communicate status, and there is no other screen space available for 
for notification areaicons. status text. 


Windows Live Messenger - Not signed in 
Se Ce "1010'AM 


Windows Live Messenger - Signed in 
oH Ce F0H0AM 


In these examples, infotips give status information for notification area icons. 


Guidelines 
Timeouts 


- Use the default initial and reshow timeouts. Exception: 
o Thumbnails that aren't redundant and displayed on the side of their associated object can be shown immediately (without any 
delay). However, use the default initial timeout for redundant thumbnails (such as a large thumbnail tip for a small graphic object) 
or thumbnails that cover their associated object. 


- For tooltips, use the default five-second tip removal timeout. 


- For infotips, turn off the tip removal timeout. Developers: Since you can't technically turn off the removal timeout, set it to its 
largest value. 


- For accessibility, if you need to set the timeout values to something other than the maximum value, make them multiples of 
the SPI_GETM OUSEHOVERTIM E and SPI_GETM ESSAGEDURATION system parameters instead of using fixed times. Doing so adjusts 
the timeouts to the speed of the user. 


Placement 
- Avoid covering the object the user is about to view or interact with. Always place the tip on the side of the object, even if that 
requires separation between the pointer and the tip. Some separation isn't a problem as long as the relationship between the 
object and its tip is clear. 
o Exception: Full name tooltips used in lists and trees. 


Incorrect: 
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& I Search for a person by entering their §* ot 
> contact information. 


& > Mobile (1) 


Correct: 


& I & it 
> Search for a person by entering their 
2 = contact information. 


In the correct example, the infotip is placed away from the Search box, even though that requires space between 
it and the caret. 


Incorrect: 


Jonathan, 7/29/2007 10:10:35 AM inserted: 
Avoid covering the object the user is about to view or 
interact with. Always place the tip on the side of the 
object, even if that requires separation between the 

} pointer and the tip. Some separation isn't a problem as 
long as the relationship between the object and its tip is F 


trees. 


e Exception: Full dame tooltips used in lists and trees. 


Correct: 


Jonathan, 7/29/2007 10:10:35 AM inserted: 

Avoid covering the object the user is about to view or 
interact with. Always place the tip on the side of the 
object, even if that requires separation between the 


pointer and the tip. Some separation isn't a problem as 
long as the relationship between the object and its tip is 
clear. Exception: Full name tooltips used in lists and 
trees. 


e Avoid covering the object the user is about to view or interact with. Always place the tip 
on the side of the object, even if that requires separation between the pointer and the tip. 


Some separation isn't a problem as long as the relationship between the object and its tip is 
clear. 


2 Exception: Full name todltips used in lists and trees. 


In the correct example, the underlying text is far more useful than the tip, so the infotip is placed well out of the 
way. 


- For collections of items, avoid covering the next object that the user is likely to view or interact with. For horizontally arranged 
items, avoid placing tips to the right; for vertically arranged items, avoid placing tips below. 


Incorrect: 
Games 


ry] 


Search (te 


Recent Items 


Computer 


Correct: 
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Recent Items les] Autumn Leaves.jpg 
m Creekjpg 
aruneeer = _ Location: Creek (C:\Users\Public\Pictures\ 
P | Desert Landscape.jpg Sample Pictures) 
| Dock,j 
Network — ie 
=) Forest.jpg 
Connect To j=) Dock.jpg 


In the incorrect example, the tip covers the object the user is most likely to interact with next. 


- For potentially distracting (often large) tips, make sure that the information is helpful for most users. If that's not the case, 
either make the distracting tips optional or even eliminate them. Otherwise, most users will have to move the pointer away from 
the target object to get rid of the tip. 


Tooltips 


- Use tooltips to provide labels for unlabeled controls. Controls that commonly have tooltips are toolbar buttons, graphic buttons, 
and progressive disclosure controls. Controls with prompts are considered labeled, such as text boxes and combo boxes. All 
other controls should have explicit labels. 


- Use sentence fragments without ending punctuation. 


- Use sentence-style capitalization. 
o Exception: This guideline is new for Windows Vista® For legacy applications, you may use title-style capitalization if necessary to 
avoid mixing capitalization styles. 


- Add an ellipsis if the label is for a command that needs additional information. 


- As with normal labels, keep tooltips brief—typically five words or less—but prefer specific labels over vague ones. 


Acceptable: 


i File Edit 


t File Edit 


In these examples, the best example is both concise and specific, whereas the incorrect example is unnecessarily 
verbose. 


Tooltips may also provide more detail for labeled toolbar buttons if doing so is helpful. Don't just repeat or give a wordy 
restatement of what is already in the label. 


Correct: 
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P Search\Sy. 


In this example, the tooltip explains what Search does. 


Incorrect: 


In this example, the tooltip just repeats what is already in the label. 


- You don't have to give labeled controls tooltips simply for the sake of consistency. 


» 


G@ ~ Lip Page ~ (@ipos+| 


In this example, the unlabeled toolbar buttons have tooltips, but the labeled ones don't. 


- Whenever appropriate, make tooltips more helpful by providing keyboard shortcuts and default values. Put this 
additional information in parentheses. Doing so makes tooltips helpful for labeled controls even when they otherwise just repeat 
the label. Don't consider this additional text when evaluating the conciseness of a tooltip. 


View Go Tools Actions Help 


In this example, Word displays default values and keyboard shortcuts in the toolbar tooltips. 
Infotips 


For infotips in nonstandard places, favor consistency over helpfulness to improve discoverability. Provide tips for all objects for 
which users are likely to want supplemental information, even if a few infotips might be obvious. Doing so avoids having users wait 
for an infotip that will never come. 
o Exception: If only a few objects have helpful infotips, don't use infotips at all. Rather, use self-explanatory control labels or in- 
place supplemental text instead. 


Use full sentences with ending punctuation. 
o Exception: Notification area icon infotips don't use ending punctuation. 


- Use sentence-style capitalization. 


Use present tense, not future. 


Use parallel grammatical constructions. Parallelism requires that words and phrases that have the same function have the same form. 
o Exception: For the full name infotip pattern, the infotip text exactly matches the phrasing, capitalization, and punctuation of 
the underlying control. 


Avoid large infotips. Large infotips are difficult to read, and difficult to position without interfering with the underlying object. 
Format infotips to make their content easier to read and scan. Large blocks of unformatted text can be difficult to read. 


Incorrect: 
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- On first use within an infotip, spell out the names of acronyms, followed by the acronym in parentheses. Example: "Dynamic 


Correct: 


muuieemees ype: JPEG Image 
Date taken: 7/29/2007 
Rating: 5 Stars 

Dimensions: 1024 x 768 
Size: 256 KB 


Humpback 


In the correct example, the formatted text is much easier to read and scan. 


Host Configuration Protocol (DHCP)." 


Start Menu infotips 


Use Start menu infotips to describe the item concisely and list the primary tasks that users can perform with the item. 
Be helpful. Focus on what users can do. Don't just repeat the item name or even use it in the description at all. 


Be specific. Avoid generic verbs and catch-all phrases like and other tasks. If the information is important, list it specifically; 
otherwise, assume that users understand that not everything is listed in the infotips. 


Be concise. Use 25 words or less. Longer infotips discourage reading. 


Start with a present-tense, imperative verb such as create, edit, show, and send. Prefer specific verbs over generic verbs such 
as manage and open, which really apply to most Start menu items. Get right to the point. 


Incorrect: 


eS Tn JPEG image Date taker: 7/29/2007 Ration 5 Stars 
Dimensions: 1024 x 768 Size: 256 KB 


Better: 


Music 


Games 


In the incorrect example, the infotip starts with a generic verb. The better example gets right to the point with 
specific verbs, but continues to use the unnecessary "and other" phrasing at the end of the tip. 


Don't use language that sounds like marketing. 


Incorrect: 
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Opens the Music folder, where you can store music and other audio files. 


Store and play music and other audio files. 
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Fabrikam Disk Defragmenter 


Your one-stop starting point for all your disk management needs. 
2 a 


In this example, the infotip sounds like marketing. 


Because these infotips are indexed for the Start menu search box, describe your program's important tasks using terms for which 
users are most likely to search. Consider using keywords and common synonyms. 


Incorrect: 


Fabrikam DVD Maker 


Create DVDs. 


Correct: 


Fabrikam DVD Maker 


Create (burn) CDs and DVDs. 


In the correct example, the infotip has common synonyms. 


- Use sentence-style capitalization. 


Developers: The Start menu infotip text comes from the item's Comment field. 
Quick Launch tooltips 


- Use a tooltip with the format: Launch (full program name) 
- Don't use ending punctuation. 


- Don't use additional text to describe the program or what it does. Because users choose the programs displayed in the Quick 
Launch bar, they already know their purpose. 


Control Panel infotips 


- Use Control Panel infotips to concisely describe the Control Panel tasks and the hardware and software configured. 
- Control Panel names and icons must have infotips. Individual tasks don't have tooltips. 
- Be helpful. Focus on what users can do. Don't just repeat the Control Panel item name or even use it in the description at all. 


- Be specific. Avoid generic verbs and catch-all phrases like and other hardware. If the information is important, list it 
specifically; otherwise, assume that users understand that not everything is listed in the infotips. 


ea / | 


Incorrect: 


~——| Configures your mouse and other pointing hardware. 


Correct: 


Ree / il 


Customize your mouse settings, such as the button configuration, double- 
click speed, mouse pointers, and motion speed. 


In the correct example, the types of hardware configured are specifically listed. 


- Be concise. Use 25 words or less. Longer infotips discourage reading. 


© 2010, Microsoft Corporation. All rights reserved. Page 205 of 882 


Start with a present-tense, imperative verb. 


Correct: 
Configure Internet display and connection settings. 
Adjust settings for vision, hearing, and mobility. 


Get right to the point. Don't use language that applies to any Control Panel, such as "Use to view and configure settings for 
the appearance and functionality of your..." or "Provides options for you to..." 


Don't use language that sounds like marketing. 


Incorrect: 
Your one-stop starting point for all your disk configuration needs. 


Because these infotips are indexed for the Control Panel search box, describe items using terms for which users are most likely 
to search. Consider using common synonyms for popular tasks and objects. 


| 


Add, remove, and configure game controller hardware such as joysticks and 
Gam gamepads. 
Controllers 


In this example, the item is described using terms for which users are most likely to search. 


- Ifa Control Panel item is likely to be confused with others, explain how it is different in the infotip. 


Incorrect: 
© ® 
= 
Sound Fabrikam 


a 
Configure your Fabrikam Sound settings. ! 


In this example, both Control Panel items configure sound, but the infotip doesn't clarify the difference. 


Correct: 


Sound Fabrikam 
ee 


Configure the Fabrikam mixer, equalizer, and 3-D sound effects. ! 


In this example, the difference between the two items is more evident because of the tip. 


Icons 
Unlike previous versions of Windows, Windows Vista allows tips to have icons. 


- For tooltips, don't use icons. 
- For infotips, use icons only if they aid in recognition or comprehension, or provide context. M ost infotips shouldn't have icons. 
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Volume: 50 
Headphones 
High Definition Audio Device 


Sf Gt 10:10 AM 
oh 


In this example, the infotip has an icon to help associate the icon with its meaning. 


- The icon must use the Aero-style and have an unobtrusive appearance. 
For general icon guidelines and examples, see Icons. 


Documentation 


When referring to tips: 


« In programming and other technical documentation, refer to the type of tip (tooltip or infotip). Everywhere else, simply call it a tip. 


- The following variations are incorrect: tool tip, Tooltip, and ToolTip. 
- To describe user interaction, use hover. 
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Tree Views 


Is this the right control? 
Design concepts 
Usage patterns 
Guidelines 
Presentation 
Interaction 
Tree organization 
Check box tree views 
Recommended sizing and spacing 
Labels 
Documentation 


With a tree view, users can view and interact with a hierarchically arranged collection of objects, using either 
single selection or multiple selection. 


In a tree, objects that contain data are called leaf nodes and objects that contain other objects are called 
container nodes. A single, top-most container node is called the root node. Users can expand and collapse 
container nodes by clicking the plus and minus expander buttons. 


= J Batteries 
a Microsoft AC Adapter 
a Microsoft ACPI-Compliant Control Method Battery 
{& Computer 
‘y Disk drives 
& Display adapters 
43 DVD/CD-ROM drives 


oe ) ) ] 


A typical tree view. 


Note: Guidelines related to layout and menus are presented in separate articles. 


Is this the right control? 


Having hierarchical data doesn't mean that you must use a tree view. Very often a list view is a simpler, yet 
more powerful choice. List views: 


- Support several different views. 
- Support sorting data by any of the columns in Details view. 
« Support organizing data into groups, forming a two-level hierarchy. 


To use a list view, you can flatten hierarchical information using the following techniques: 


- Remove the root node if present, because it often isn't necessary. 
- Use list view groups, tabs, drop-down lists, or expandable headings to replace the top-level containers. 


+ 


Name Category Workgroup Si 
Media Devices (4) Ls 
GL, Fabrikam Media Devices 
GL Microsoft Media Devices 
{Jonathan Media Devices 
GL Guest Media Devices 
Computer (526) 

New guest Computer Workgroup 
1™@ Jonathan Computer Workgroup 
7 Guest Computer Workgroup 
7) Fabrikam Computer Workgroup 
1 Microsoft Computer Workgroup + 

«| ; 
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In this example, list view groups are used for the top-level containers. 


Trusted root certification authorities | Trusted publishers 


Issued to Issued by = 
Egil class 3 Public Primary Certification Authority Class 3 Public Primary Certification Autho 
Fal class 3 Public Primary Certification Authority Class 3 Public Primary Certification Autho 


Eg] copyright (c) 1997 Microsoft Corp. Copyright (c) 1997 Microsoft Corp. 
EQIGTE CyberTrust Global Root GTE CyberTrust Global Root 

Eq] Microsoft Authenticode(tm) Root Authority Microsoft Authenticode(tm) Root Authori 
EQ) Microsoft Corporate Root Authority Microsoft Corporate Root Authority 

EQ] Microsoft Corporate Root CA Microsoft Corporate Root CA 

EQ] Microsoft Root Authority Microsoft Root Authority % 


——— ————— 


_ 


In this example, tabs are used for the top-level containers 


© ty Connect to a network 


Disconnect or connect to another network 


Show: | Dial-up and VPN 


me Dial-up Connection Dial-up connection 


me Fabrikam Connection Dial-up connection 


Set up 2 connection or network 
Open Network and Sharing Center 


In this example, a drop-down list is used for the top-level containers. 


- If an associated control displays the content of the selected container, that control can display lower levels of the hierarchy. 


[J Tabs 
Tree Views 
() Text Boxes 
Toolti ind Infoti . 
ee pears Is this the right control? 
nee babe Design concepts 
C1) Notifications Usage patterns 
() Search Boxes Guidelines 
( Status Bars Recommended sizing and spacing 
Commands Labels 
Text With a tree view, users can view and interact with a hierarchically arranged 
Interaction collection of objects, using either single selection or multiple selection. 


In this example, low-level containers are displayed in the document window. 
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You must use a tree view if you need to display a hierarchy of more than two levels (not including the root 
node). 


To decide if a tree view is the right control, consider these questions: 


Is the data hierarchical? If not, use another control. 


Does the hierarchy have at least three levels (not including the root)? If not, consider alternatives such as list view groups, tabs, 
drop-down lists, or expandable headings. 


Do the items have auxiliary data? If so, consider using a list view in the Details view mode to take full advantage of the auxiliary data. 


Does the lower-level data relate to independent subtasks? If so, consider displaying the information in an associated control or in 
a separate window (displayed using command buttons or links). 


Are the target users advanced? Advanced users are more proficient at using trees. If your application is aimed at novice users, 
avoid using tree views. 


Do the items have a single, natural, hierarchical categorization that's familiar to most users? If so, the data is ideal for a tree view. 
If there is a need for multiple views or sorting, use a list view instead. 


Do users need to see the lower-level data in some but not all scenarios, or some but not all of the time? If so, the data is ideal for 
a tree view. 


Note: Sometimes a control that looks like a tree view is implemented using a list view. In such cases, apply the 
guidelines based on the usage, not on the implementation. 


Design concepts 


Trees are intended to organize data and make it easy to find, yet it's difficult to make data within a tree easily 
discoverable. Keep the following principles in mind when deciding about tree views and their organization. 


Predictability and discoverability 


A tree view is based on the relationships between objects. Trees work best when the objects form a clear, well 
known, mutually exclusive relationship in which every object maps to a single, easy-to-determine container. 


A significant problem is that an object can appear in different nodes. For example, where would users expect to 
find a hardware device that plays music, has a large hard disk, and uses a USB port? Perhaps in any of several 
different container nodes, such as Multimedia, Storage, USB, and possibly in Hardware Resources. One solution is 
to place each object under the single most appropriate container regardless of the circumstances; another 
approach is to place each object under all containers that apply. The former promotes a simple, clean hierarchy 
and the latter promotes discoverability—each has advantages and potential problems. 


Users may not completely understand the layout of the tree, but they will form a mental model of the 
relationships after interacting with the tree for a while. If that mental model is incorrect, it leads to confusion. 
For example, suppose a music player can be found in the Multimedia, Storage, and USB containers. This 
arrangement improves discoverability. If a user first finds the device in Multimedia, the user may conclude that 
all devices like music players appear in the Multimedia container. The user will then expect similar devices, such 
as digital cameras, to appear in the Multimedia container and will become confused if that isn't the case. 


The challenge when designing a tree is to balance discoverability with a predictable user model that minimizes 
confusion. 


Breadth vs. depth 


Usability studies have shown that users are more successful at finding objects in a tree that is broad than ina 
tree that is deep, so when designing a tree you should prefer breadth over depth. Ideally, a tree should have no 
more than four levels (not counting the root node) and the most commonly accessed objects should appear in 
the first two levels. 


Other principles 


« When users find what they are looking for, they stop looking. They don't look to see where else an object might be found because 
they don't need to. Those users may assume that the first path they find is the only path. 


- Users have trouble finding objects in large, complex trees. Users will not perform an exhaustive, manual search to find objects in 
such trees; they stop once they think they've expended a reasonable effort. Consequently, large, complex trees need to 
be supplemented with other access methods, such as word search, an index, or filtering. 


- Some programs allow users to create their own trees. While such self-designed trees might be aligned with a user's mental model, 
they are often created haphazardly and poorly maintained. For example, while a file system, e-mail program, and Favorites list 
typically store similar types of information, users rarely bother to organize them in the same way. 


If you do only one thing... 
Carefully weigh the benefits and drawbacks of using tree views. Having hierarchically arranged data doesn't mean 
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that you need to use a tree view. 


Usage patterns 


Tree views have several usage patterns: 


Tree views with only Typically, these tree views have an associated control that displays the content of the selected container, so users can interact 
container nodes with only one container at a time. 

Users can view and interact 
with one container at a 
time. 


Project types: Templates: 
Visual Basic Visual Studio installed templates 


3 Windows 
i i<MB| V) 
. Smart Device el a Bel 


i Windows ClassLibrary Console Windows 
|b Starter Kits Application Application Control... 
+)- Visual C# 


c3- Visual J# xe a4 


a Visual C++ Web Control Windows Empty Crystal 


(+)- Other Project Types Library Service Project Reports A... 


A project for creating an application with a Windows user interface 


WindowsApplication3 


D:\Users\Administrator\Documents\Visual Studio 2005\Projects : 


WindowsApplication3 Create directory for solution 


In this example, the tree view has only container nodes. The contents of the selected node are displayed in the 
associated list view control. 


Tree views with container Typically, these tree views have an associated control that displays the content of the selected container or leaf. Allowing users to 
and leaf nodes interact with leaves often makes it necessary to support multiple selection. 
Users can view and interact 


with containers and leaves. Eaider List be x| cee 
(© C:\Documents and Settings\JonathaniMy | Is o [<a>] 
(5) _private 
) () Decisions 
=} ‘= Elements Check Boxes 
& (3) Commands ; 
@ ( Control Panels Is this the right control? 
c Q Controls Usage patterns 
- ~ Guidelines 
® ( Backups Recommended sizing and spacing 
@& () Checkboxes_files Labels 
& () Command_buttons_files 
rz rere With a check box, users make a decision 
(2) Guidelines 
x oo Consequently, check boxes should be us 
5) command_buttons_vs_hyperlir [¥] Clock 
cy} Controls_intro, htm 
9}) Drop_down_lists.htm [=] Network 


In this example, the tree view has both container and leaf nodes. Since multiple selection is supported, the content 
of the opened items are displayed using tabs in the associated control. 


Alternatively, the tree view can have an organized list, where the containers are headings and the leaves are options. 
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Security Settings - Internet Zone 


.NET Framework-reliant components 

& Run components not signed with Authenticode 
© Disable 
@© Enable 
© Prompt 

& Run components signed with Authenticode 
© Disable 
@ Enable 
© Prompt 

9) ActiveX controls and plug-ins 

%) Allow previously unused ActiveX controls to run without prom 
© Disable 
@ Enable 

#) Allow Scriptlets 
@ Disable 


*Takes effect after you restart Internet Explorer 


In this example, the tree leaves are options and the containers are option categories. 


Check box tree views The check boxes clearly indicate that multiple selection is possible. Use this tree pattern when multiple selection is essential or 
Users can select any commonly used. 

number of items, including 

none. 


Turn Windows features on or off 


To turn a feature on, select its check box. To turn a feature off, clear its 
check box. A filled box means that only part of the feature is turned on. 


)) Indexing Service 

|}) Internet Information Services 

Microsoft .NET Framework 3.0 

eb Microsoft Message Queue (MSMQ) Server 

[1] )) Microsoft Message Queue (MSMQ) Server Core 
[) MSMQ DCOM Proxy 

)) Print Services 

yy Remote Differential Compression 

PY} Removable Storage Management 

“| )) RIP Listener 


e5OSOOSs 


Iso 


Lox) ([_cancet_} 


In this example, a check box tree view allows selection of features to turn on or off. 


Tree view builders Many trees can be created or modified by users. Some trees are built in place using context menus and drag-and-drop (such as the 
Users can create atree by folders in Windows®Explorer), whereas other trees are built using a specialized dialog box (such as the Favorites list in Windows 
adding one container or Internet Explorer ®. 


leaf at a time and 
optionally setting the order. 
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Add a Favorite 


Add this webpage as a favorite. To access your 
favorites, visit the Favorites Center. 


MSN.com 


In this example from Windows Internet Explorer, users can build their own list of favorites by using a dialog box. 


Tree views with alternative As mentioned previously, users have trouble finding objects in large, complex trees, so such trees should be supplemented with 
access methods other access methods, such as a word search, an index, or filtering. 
Users can find objects in 


ways other than using a 
hierarchical tree. 


- Help on Help (Microsoft Document Explorer Help) 
Microsoft Document Explorer Overview 
Help Sources: Local Help and Online Help 
- Techniques for Locating Help 
How to: Filter Help Content 
How to: Find Topics with Sample Code 
How to: Search the Internet 


How to: Browse for Information by Subject 
How to: Navigate with the Table of Contents 
Managing Help Topics and Windows 
+). Customizing Microsoft Document Explorer 
Reference (Microsoft Document Explorer Help) 


Ce] Contents L@ Index |[$g] Help Favorites 


In this example, users can also access information using a table of contents, an index, and favorites. For some 
users, the Index and Search tabs can be more useful than the Contents tab. 
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Guidelines 


Presentation 


Within a container, sort the items in a logical order. Sort names in alphabetical order, numbers in numeric order, and dates 


in chronological order. 


Use the Always Show Selection attribute so that users can readily determine the selected item, even when the control doesn't 


have input focus. 


If the tree is acting as a table of contents, use the Single Expand attribute to simplify the management of the tree. This way, only 


(m) Windows Mail 

e Windows Media Center 
[) Windows Media Player 
} Windows Meeting Space 
P| Windows Movie Maker 
iE) Windows Photo Gallery 
& Windows Update 

a Accessories 


Calculator 
G8 Command Prompt 
> Connect to a Network Projector 
a Notepad 
Y Paint 
(ui Remote Desktop Connection 
iS) Run 
Q Snipping Tool 
t Sound Recorder 
@® Sync Center 
WW Welcome Center 
Windows Explorer 
4] Windows Mobility Center 
BR) Windows Sidebar 
| WordPad 
r) Ease of Access 


r) System Tools 
\)) Tablet PC 


ay || rh 


the relevant portion of the tree is expanded. 


Avoid presenting empty trees. If a user creates a tree, initialize the tree with instructions or example items that users might need. 
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Jonathan 
Documents 
Pictures 
Music 


Games 


Search 
Recent Items 
Computer 
Network 
Connect To 


Control Panel 


Default Programs 


Help and Support 


Run... 


In this example, the Windows Start menu also lets users access programs, files, and Web pages by typing part of 
the name into the Search box. 
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Gy Feeds History + [@] 
Links 


Ph Microsoft Websites 
#@ IE Add-on site 
@ IE site on Microsoft.com 
@ | Marketplace 
@)| Microsoft At Home 
@ | Microsoft At Work 
@ | Welcome to IE7 
)) MSN Websites 
r) Windows Live 


In this example, the list is initially presented with examples. 


Don't make the container nodes collapsible if users have no reason to collapse them. Doing so adds unnecessary complexity. 


If load performance is a problem, display only the first and second level containers of the tree by default. You can then load 
additional data on demand when a user expands branches in the tree. 


- If users expand or collapse a container, make that state persist so it takes effect the next time the tree view is displayed, unless 
users are likely to prefer starting in the default state. Persistence should be on a per-tree view, per-user basis. 


If high-level containers have similar contents, consider using visual clues to differentiate them. 


Incorrect: 
2) All Mail Items Y 


] Gt Mailbox - Jonathan 
(@) Deleted Items (25) 
LA| Drafts [2] 

Ll Guidelines 
Hardware 
rs Inbox 
fa Junk E-mail 
Es) Microsoft 
(3) Outbox 
3 Sent Items 
[Gal Sync Issues 
Synchronization Failures 
8 0G Search Folders 
 &® Archive Folders 
(@) Deleted Items 
A| Drafts 
8 Li Guidelines 
(i Hardware 
LS Inbox (2) 
(@ Junk E-mail 
8 Lj Microsoft (81) 
re) Outbox 
i) Sent Items 
[5 Sync Issues 
| Synchronization Failures 
® [6 Search Folders 


In this example, the M ailbox and Archive Folders have similar contents. Once the trees are further expanded, it is 
very difficult for users to know where they are in the tree, leading to confusion. Using slightly different icons in the 
different sections would address this problem. 


- Reconsider connecting lines. Although these lines clearly show relationships between container and leaf nodes, they add visual 
clutter without aiding comprehension significantly. Specifically, they don't help when nodes are close together, nor do they help 
when nodes are so far apart that scrolling is required. 


Correct: 
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Egg Jonathan 
S a Batteries 
I Microsoft AC Adapter 
I Microsoft ACPI-Compliant Control Method Battery 
(& Computer 
t= Disk drives 
& Display adapters 
£3 DVD/CD-ROM drives 


of) EE) 


Better: 
© ge Jonathan 
2 I Batteries 
I Microsoft AC Adapter 
I Microsoft ACPI-Compliant Control Method Battery 
(& Computer 
ca Disk drives 
&, Display adapters 
<3 DVD/CD-ROM drives 


2 & & 


The connecting lines do little to aid comprehension. 


Interaction 


- Consider providing double-click behavior. Double-clicking should have the same effect as selecting an item and performing its 
default command. 


- Make double-click behavior redundant. There should always be a command button or context menu command that has the 
same effect. 


- If an item requires further explanation, provide the explanation in an infotip. 


Gy Feeds History vy |] 

)) Links 

@_ IE Add-on site 

€_ IE site on Microsoft.com 

| Marketplace 

€) Microsoft At Home 

€) Microsoft At Work 

€) Welcome to IE7 

By indows Vista User Experience Guide... > 
Ji MsWindows Vista User Experience Guidelines 
J Win http://uxguide/ 


In this example, an infotip provides further information. 


- Provide context menus of relevant commands. Such commands include Cut, Copy, Paste, Remove or Delete, Rename, and Properties. 


- When disabling a tree view, also disable any associated labels and command buttons. 


Tree organization 


Use a natural hierarchical structure that's familiar to most users. 
If you can't use such a structure, try to balance discoverability with a predictable user model that minimizes confusion. 


To safely improve discoverability, place an item in multiple containers when: 
o The item isn't related to any other similar items (so users don't become confused by incorrect associations). 


o There are only a few of such redundantly located items (so the tree doesn't become bloated). 


Use the simplest hierarchical structure that works well. To do so: 
o Place the most commonly accessed objects in the first two levels of the tree (not counting the root node), and place less 
commonly accessed objects farther down the hierarchy. 


o Eliminate unnecessary or combine redundant intermediate-level containers. 


Prefer breadth over depth. Ideally, a tree should have no more than four levels and the most commonly accessed objects should 
appear in the first two levels. 


Determine if you really need a root node. Provide a root node if users need the ability to perform commands on the entire 
tree (possibly using a context menu on the root node). Otherwise, the tree is simpler and easier to use without it. 
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- If the tree has alternative access methods such as a word search or an index, optimize the tree for browsing by focusing on the 
most useful content. With alternative access methods, the tree's content doesn't have to be comprehensive. Simplifying the tree 
makes it easier for users to find the most useful content. 


Check box tree views 


- Display the number of selected items below the list, especially if users are likely to select several items. This feedback helps 
users confirm that their selection is correct. 


ltems to back up: 


=i) My Documents Name Comment 
eHolk 30 sicmma 
ad 4- ea Folder — | Eamy Documents 
a YY ools 
k 
3-EAGe Downloads 1) ©Q My Network Places 
2 MC Picture 
+A) Fabrikam 
2 LA Music 
4 YE Movie i) 
<,) Mm (>) <| mM | [il 


48 of 50 items selected, 


In this example, the number of selected items is displayed below the tree. It is clear that two items are not 
selected. 


- If there are potentially many items and selecting or clearing all of them is likely, add Select all and Clear all command buttons. 
- Use mixed-state check boxes to indicate partial selection of the items in a container. 


Correct: 


Turn Windows features on or off 


To turn a feature on, select its check box. To turn a feature off, clear its 
check box. A filled box means that only part of the feature is turned on. 


7 
}) Indexing Service 

}) Internet Information Services 

)) Microsoft .NET Framework 3.0 

ie Microsoft Message Queue (MSMQ) Server 

Py Microsoft Message Queue (MSMQ) Server Core 
MSMQ DCOM Proxy 

)) Print Services 

) Remote Differential Compression 


mi Removable Storage Management 
T])) RIP Listener 


In this example, the mixed-state check boxes are used to indicate partial selection. 


Recommended sizing and spacing 


SB EDUUS Gree oe 


Minimum 
4) Computer 55 DLUs (90 pixels) 
"a Disk drives 


MY Display adapters 


Size to longest English item, plus 30% for expansion. 


Recommended sizing and spacing for tree view controls. 
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- Choose a tree view width that avoids the need for horizontal scrolling for most items when the tree is fully expanded. 
- Include an additional 30 percent to accommodate localization. 


- Choose a tree view height that eliminates unnecessary vertical scrolling. Consider making a tree view slightly longer (or even more so 
if there is available space) if doing so reduces the need for a vertical scroll bar. 


Incorrect: 
( Environment a 
LA General P 
Add-in/Macros Security 
AutoRecover 


Documents 
Find and Replace 
Fonts and Colors 
Help 
Import and Export Setting 
International Settings 
Keyboard 
Startup 
Task List 
Web Browser 
(j Projects and Solutions e 
(5g Source Control 
(5g Text Editor 


[a Database Tools 2 
4 | ml | > 


" 


In this example, making the tree view slightly wider and longer would eliminate the scroll bars in most cases. In 
this particular tree, only one container can be opened at a time. 


. If users benefit from making the tree view larger, make the tree view and its parent window resizable. Doing so allows users to 
adjust the tree view size as needed. 


Labels 


Control labels 


All tree views need labels. Write the label as a word or phrase, not as a sentence, ending with a colon, and using static text. 


Assign a unique access key. For assignment guidelines, see Keyboard. 
Use sentence-style capitalization. 


Position the label above the control, and align the label with the left edge of the control. 


For multiple-selection tree views, write the label so that it's clear that multiple selection is possible. Check box tree view labels can 
be less explicit. 


Incorrect: 
Components: 


re} ab Games 


}) Indexing Service 
= }) Internet Information Services 
H }) Microsoft NET Framework 3.0 


In this example, the label provides no information about multiple selection. 


Better: 


Select one or more components to install: 


ow 
+) Indexing Service 
re] r) Internet Information Services 


& }) Microsoft NET Framework 3.0 
In this example, the label clearly indicates that multiple selection is possible. 


Best: 
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Select components to install: 


‘ez Indexing Service 


|} Internet Information Services 


< 


Py Microsoft .NET Framework 3.0 


In this example, the check boxes clearly indicate that multiple selection is possible, so the label doesn't have to be 


exp 


Data text 


icit. 


- Use sentence-style capitalization. 


Instructional text 


- If you need to add instructional text about a tree view, add it above the label. Use complete sentences with ending punctuation. 


- Use sentence-style capitalization. 


- Supplemental explanations that are helpful but not necessary should be kept short. Place this information either in 
parentheses between the label and colon, after the main instruction if used instead of a label, or below the control. 


Security Settings - Internet Zone 


Settings 


bieeg .NET Framework-reliant components 
& Run components not signed with Authenticode 
© Disable 
@ Enable 
© Prompt 
& Run components signed with Authenticode 
© Disable 
@ Enable 
© Prompt 
@) ActiveX controls and plug-ins 
®%) Allow previously unused ActiveX controls to run without prom 


| 


*Takes effect after you restart Internet Explorer 


In this example, the supplemental explanation is below the control. 


Documentation 


When referring to tree views: 


Use the exact label text, including its capitalization, but don't include the access key underscore or colon. Include the word list 
or hierarchical list if the context requires making a distinction from regular lists. 


For tree items, use the exact item text, including its capitalization. 
Refer to tree views as tree views only in programming and other technical documentation. Everywhere else, use list or hierarchical 


list because the term tree is confusing to most users. 


To describe user interaction, use select for the data, and expand and collapse for the plus and minus buttons. 
When possible, format the label and tree items using bold text. Otherwise, put the label and items in quotation marks only if required 


to prevent confusion. 


Example: In the Contents list, select User Interface Design. 


When referring to check boxes in a tree view: 


- Use the exact label text including its capitalization, and include the words check box. Don't include the access key underscore. 


- To describe user interaction, use select and clear. 


- When possible, format the label using bold text. Otherwise, put the label in quotation marks only if required to prevent confusion. 
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Example: In the Items to back up list, select the My Documents check box. 
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Commands 
These articles provide guidelines for using commands in your Windows@based applications: 


- Menus 
- Toolbars 
- Ribbons 
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Menus 


Usage patterns 
Is this the right user interface? 
Design concepts 
Guidelines 
General 
Menu bars 
Hiding menu bars 
Menu categories 
Menu item organization and order 
Submenus 
Presentation 
Tab menus 
Context menus 
Bullets and checkmarks 
Icons 
Access keys 
Shortcut keys 
Standard menus 
Using ellipses 
Labels 
Documentation 


A menu is a list of commands or options available to users in the current context. 


Drop-down menus are menus displayed on demand on mouse click or hover. They are normally hidden from view 
and therefore are an efficient means of conserving screen space. A submenu or cascading menu is a secondary 
menu displayed on demand from within a menu. They are indicated by an arrow at the end of the submenu label. 
A menu item is an individual command or option within a menu. 


Menus are often displayed from a menu bar, which is a list of labeled menu categories typically located near the 
top of a window. By contrast, a context menu drops down when users right-click on an object or window region 
that supports a context menu. 


Menu bar 


» 


Menu | " 
category a + 
Extra large icons ; = ; 


Large icons Administrat... AutoPlay Backup and 


Tools 
Medium icons 


Small icons ow 
Drop-down : P U ; 


menu Color Date and Default 
Management Time Programs 


; : . Stack by 
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ree ee aa Soo ee 

Stack by 

Stack by > | Ascending Submenu 
Choose details... Descending 

Go to > 

Refresh 


Menu item 


A typical menu bar displaying a drop-down menu and submenu. 


Note: Guidelines related to command buttons, toolbars, keyboard, and Start menu are presented in separate 
articles. 


Usage patterns 


Menus have several usage patterns: 


Menu bars Menu bars are very common and easy to find, as well as an efficient use of space. 
A menu bar 
displays 
commands and : 
options in drop- (pm Inbox - Windows Mail 
down menus. File Edit View Tools 
BW Create Mail New message i Ctrl+N 
New messag i > 
4 i» Local Folders coe nie 
Je Inbox Reply to sender Ctrl+R 
i Outbox Reply to all Ctrl+Shift+R 
ie Sent Items seyek 
© Deleted Items Reply to group Ctrl+G 
|Z Drafts Forward Ctrl+F 


A menu bar from Windows®Mail. 


Toolbar menus Toolbar menus are toolbars consisting primarily of commands in menu buttons and split buttons, with only a few 


A menu bar 
implemented as 
a toolbar. 


direct commands, if any. 


Date disc... 
Video DVD... 


A toolbar menu in Windows Photo Gallery. 


For guidelines on this pattern, see Toolbars. 
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Tab menus 
Buttons within 
tabs that display 
a small set of 
commands and 
options related 
toatabina 
drop-down 
menu. 


Menu buttons 
Command 
buttons that 
display a small 
set of related 
commands ina 
drop-down 
menu. 


Context menus 
Drop-down 
menus that 
display a small 
set of commands 
and options 
related to the 
current context. 
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Tabs with menus look like ordinary tabs except their bottom portion has a button with drop-down arrow. Clicking the 
button displays a drop-down menu instead of selecting the tab. 


Library 


>. 


Format 


Bit rate > 


Rip CD automatically when inserted r 
Eject CD after ripping 


More options... 


Help with ripping 


Tab menus are used in Windows M edia Player. 


Menu buttons look like ordinary command buttons except they have a drop-down arrow within them. Clicking 
the button displays a drop-down menu instead of performing a command. 


Split buttons are similar to menu buttons except that they are variations of a command, and clicking the left 
portion of the button performs the action on the label directly. 


@ Burn 
=) Print... 
@ Order prints... 


A menu button with a small set of related commands. 
Context menus drop-down when users right-click on an object or window region that supports a context menu. 


Folders 
4 WE Desktop 
> Jonat 
)) Publi 


> Comy 
Netw 
Conti 


& Recy¢ 


Collapse 


Explore 
Open 


Properties 


A context menu from Windows Explorer. 


If context menus are the best menu choice but you need a solution suitable for all users, you can use a menu drop- 
down arrow button. 
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Change my display picture... 
Create dynamic display picture 


View my contact card 
View profile 


Size > 


Hide 


A context menu made visible with a menu drop-down button. 


Task pane menus Unlike context menus, they are displayed automatically within a window pane, instead of on demand. 
A small set of 
commands 
related to the 
selected object 
or program 
mode. 


 Autoadjust 


| 
> Adjust exposure 


7) Adjust color 


Crop picture N 
Proportion 


@) Rotate frame 


A task pane menu from the Windows Photo Gallery viewer. 


Is this the right user interface? 
To decide, consider these questions: 
Menu bars 


© 2010, Microsoft Corporation. All rights reserved. Page 225 of 882 


Do the following conditions apply: 


- Isthe window a primary window? 

- Are there many menu items? 

- Are there many menu categories? 

- Do the majority of the menu items apply to the entire program and primary window? 
« Does the menu need to work for all users? 


If so, consider using a menu bar. 
Toolbar menus 
Do the following conditions apply: 


- Isthe window a primary window? 

- Does the window have a toolbar? 

- Are there only a few menu categories? 

« Does the menu need to work for all users? 


If so, consider using a toolbar menu instead of or in addition to a menu bar. 
Tab menus 
Do the following conditions apply: 


- Isthe window a primary window? 


- Does the window have tabs, where each tab is used for a dedicated set of tasks (as opposed to using tabs to show different views)? 


- Isthere one menu category that applies to each tab? 
- Are there many commands and options, but only a small set for each tab? 


If so, consider using a tab menu instead of a menu bar. 
Context menu 
Do the following conditions apply: 


- Isthere a small set of contextual commands and options that apply to the selected object or window region? 
- Are these menu items redundant? 
- Are the target users familiar with context menus? 


If so, consider providing context menus for the objects and window regions that need them. 


For browser-based programs, task pane menus are a more common solution for contextual commands. 
Currently, users expect context menus in browser-based programs to be generic and unhelpful. 


Task pane menu 
Do the following conditions apply: 


- Isthe window a primary window? 

- Isthere a small set of contextual commands and options that apply to the selected object or program mode? 
- Are there a few menu categories? 

- Does the menu need to work for all users? 


If so, consider using a task pane menu instead of a context menu. 
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Design concepts 
Effective menus that promote a good user experience: 


- Use acommand presentation that matches your program type, window types, command usage, and target users. 
- Are well organized, using standard menu organization when appropriate. 

- Use menu bars, toolbars, and context menus effectively. 

- Use icons effectively. 


- Use access keys and shortcut keys effectively. 


If you do only one thing... 
Choose a command presentation that matches your program type, window types, command usage, and target 
users. 


For more information and examples, see Menu Design Concepts. 


Guidelines 
General 


- All menu patterns except menu bars need a drop-down arrow to indicate the presence of a pull-down menu. The presence of menus 
goes without saying in a menu bar, but not in the other patterns. 


- Don't change menu item names dynamically. Doing so is confusing and unexpected. For example, don't change a Portrait mode option 
to Landscape mode upon selection. For modes, use bullets and checkmarks instead. 


o Exception: You can change menu item names that are based on object names dynamically. For example, lists of recently used 
files or window names can be dynamic. 


Menu bars 


- Consider eliminating menu bars with three or fewer menu categories. If there are only a few commands, prefer lighter alternatives 
such as toolbar menus, or more direct alternatives such as command buttons and links. 


- Don't have more than 10 menu categories. Too many menu categories is overwhelming and makes the menu bar difficult to use. 


- Consider hiding the menu bar if the toolbar or direct commands provide almost all of the commands needed by most users. Allow users 
to show or hide with a Menu bar check mark option in a toolbar menu. 
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e Microsoft Corporation - Windows Internet Explorer 


ae http://www.microsoft.com, ¥ | #¢| X | | Live Search 
—d - 


File Edit View Favorites Tools Help 


ww Cl Microsoft Corporation lr’ fp > > = 3} Page ~[(G Tools ~} ” 


Delete browsing history... 


Diagnose connection problems... 


Pop-up blocker 


Phishing filter 
Manage add-ons 


Work offline 
Windows update 
Full screen 

Menu bar 
Toolbars 


Send to OneNote 


@ Internet Internet options 


In this example, Windows Internet Explorer®provides a menu bar option. 


For more information, see hiding menu bars. 


Hiding menu bars 


Generally, toolbars work great together with menu bars because having both allows each to focus on their 
strengths without compromise. 


- Hide the menu bar by default if your toolbar design makes having a menu bar redundant. 
- Hide the menu bar instead of removing it completely, because menu bars are more accessible for keyboard users. 


- To restore the menu bar, provide a Menu bar checkmark option in the View (for primary toolbars) or Tools (for secondary toolbars) 
menu category. For more information, see Standard menu and split buttons. 


Menu categories 


- Choose single word names for menu categories. Using multiple words makes the separation between categories confusing. 


- For programs that create or view documents, use the standard menu categories such as File, Edit, View, Tools, and Help. Doing so 
makes common menu items predictable and easier to find. 


- For other types of programs, consider organizing your commands and options into more useful, natural categories based on your 
program's purpose and the way users think about their tasks and goals. Don't feel obligated to use the standard menu organization if it 
isn't suitable for your program. 


- If you choose to use non-standard menu categories, you must choose good category names. For more information, see the Labels 
section. 


- Prefer task-oriented menu categories over generic categories. Task-oriented categories make menu items easier to find. 


In this example, Windows M edia Player uses task-oriented menu categories. 
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- Avoid menu categories with only one or two menu items. If sensible, consolidate with other menu categories, perhaps using a 
submenu. 


- Consider putting the same menu item in multiple categories only if: 
o The menu item logically belongs in multiple menu categories. 


o You have data showing that users have trouble finding the item in a single menu category. 
o You have only one or two hard-to-find menu items in multiple categories. 


- Don't put different menu items that use the same name in multiple categories. For example, don't have different Options menu items 
in multiple categories. 
o Exception: The tab menu pattern may have different Options and Help menu items in each tab menu. 


More options... 


Help with sync 


More optio More options... 
Help with rig Help with burning 


More options... 


Help with using the library 


In this example, Windows M edia Player has Options and Help menu items in each tab menu. 
Menu item organization and order 


Organize the menu items into groups of seven or fewer strongly related items. For this, submenus count as a single menu item in the 
parent menu. 


Don't put more than 25 items within a single level of a menu (not counting submenus). 


Put separators between the groups within a menu. A separator is a single line that spans the width of the menu. 
Within a menu, put the groups in their logical order. If there is no logical order, place the most commonly used groups first. 


Within a group, put the items in their logical order. If there is no logical order, place the most commonly used items first. Put numeric 
items (Such as zoom percentages) in numeric order. 


Submenus 


- Avoid using submenus unnecessarily. Submenus require more physical effort to use and generally make the menu items more difficult 
to locate. 


- Don't put frequently used menu items in a submenu. Doing so would make using these commands inefficient. However, you can put 
frequently used commands in a submenu if they are normally accessed more directly, such as with a toolbar. 


- Consider using a submenu if: 
o Doing so simplifies the parent menu because it has many items (20 or more), or the submenu is part of a group of more than 
seven items. 


o The items in the submenu are used less frequently than those in the parent menu. 
o The submenu would have three or more items. 
o There are three or more commands that begin with the same word. In this case, use that word as the submenu label. 
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New > Mail message bs 


Open Ctrl+O News message 

aaa Folder... Ctrl+Shift+E 
€ attachment 

Save as stationery... Contact... 


In this example, the New submenu replaces separate commands for New mail message, New news message, New 
folder, and New contact. 


- Use at most three levels of menus. That is, you can have a primary menu and at most two levels of submenus. Two levels of submenus 
should be rare. 


Presentation 


- Disable menu items that don't apply to the current context, instead of removing them. Doing so makes menu bar contents stable and 
easier to find. Exceptions: 
o For contextual menu categories, remove rather than disable context menu items that don't apply to the current context. A 
menu category is contextual when it is displayed only for specific modes, such as when a certain object type is selected. For 
details, see the remove vs. disable guidelines for context menus. 


o If determining when a menu item should be disabled causes noticeable performance problems, leave the menu item active and 
if necessary have its selection result in an error message. 


Tab menus 


- Each tab menu may have context specific Options and Help menu items. This is in contrast to all other menu patterns. Each tab is used 
for a dedicated set of tasks, so any redundancy across tab menus isn't confusing. 


Context menus 


Use context menus only for contextual commands and options. The menu items should apply only to the selected (or clicked upon) 
object or window region, not the entire program. 


Don't make commands only available through context menus. Like shortcut keys, context menus are alternative means of performing 
commands and choosing options. For example, a Properties command is also available through the menu bar or the Alt+Enter access 
key. 

Provide context menus for all objects and window regions that benefit from a small set of contextual commands and options. M any 
users right-click regularly and expect to find context menus anywhere. 


Consider using a menu drop-down arrow button for context menus targeted at all users. Normally context menus are suitable for 
commands and options targeted at advanced users. However, you can use a menu drop-down button in cases where context menus are 
the best menu choice and you need to target all users. 
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Change my display picture... 
Create dynamic display picture 


View my contact card 
View profile 
Size » 


Hide 


In this example, a menu drop-down button is used to make a context menu visible. 
Menu item organization and order 


- Organize the menu items into groups of seven or fewer strongly related items. 

- Avoid using submenus to keep context menus simple, direct, and efficient. 

- Don't put more than 15 items within a context menu. 

- Put separators between the groups within a menu. A separator is a single line that spans the width of the menu. 


- Present menu items using the following order: 
Primary (most frequently used) commands 
Open 
Run 
Play 
Print 
<Separator> 
Secondary commands supported by the object 
<separator> 
Transfer commands 
Cut 
Copy 
Paste 
<Separator> 
Object settings 
<separator> 
Object commands 
Delete 
Rename 
<Separator> 
Properties 


Presentation 


. Display the default command using bold. When practical, also make it the first menu item. The default command is invoked when 
users double-click or select an object and press Enter. 


- Remove rather than disable context menu items that don't apply to the current context. Doing so makes context menus contextual 
and efficient. 
o Exception: Disable menu items that don't apply if there is a reasonable expectation for them to be available: 
a Always have the relevant standard context menu commands, such as Cut, Copy, Paste, Delete, and Rename. 


a Always have the commands that complete related sets. For example, if there is a Back, there should also be a Forward. If 
there's a Cut, always have a Copy and Paste. 
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Bullets and checkmarks 


Menu items that are options may use bullets and checkmarks. Commands may not. 


Use a bullet to choose one option from a small set of mutually exclusive choices. There should always be at least two bullets in a 
group. For more information, see Radio buttons. 


use a Set of bullets instead. For more information, see Check boxes. 


Use a checkmark to toggle an independent setting on or off. If the selected and cleared states aren't clear and unambiguous opposites, 


For a mixed checkmark state, display a menu item without a checkmark. The mixed state is used for multiple selection to indicate that 


the option is set for some, but not all, objects, so each individual object has either the selected or cleared state. The mixed state is not 


used as a third state for an individual item. 
Put separators between the related sets of checkmarks or bullets. A separator is a single line that spans the width of the menu. 


Icons 


Consider providing menu item icons for: 
o The most commonly used menu items. 


o Menu items whose icon is standard and well known. 
o Menu items whose icon well illustrates what the command does. 


users from focusing on the important menu items. 


LM Organize v\' === Views ¥ jg] Preview 


New folder 


{ii 
oO 

3 

< 


Select all 


(LJ) Layout > 
Folder and search options 

7 «CODelete 
Rename 
Remove properties 


Properties 


Close 


In this example, the Organize menu has icons only for the most commonly used menu items. 
- Make sure menu icons conform to the Aero-style icon guidelines. 
For more information and examples, see Icons. 


Access keys 


- Assign access keys to all menu items. No exceptions. 


If you use icons, don't feel obligated to provide them for all menu items. Cryptic icons aren't helpful, create visual clutter, and prevent 


Whenever possible, assign access keys for commonly used commands according to the Standard Access Key Assignments. While 
consistent access key assignments aren't always possible, they are certainly preferreda€” especially for frequently used commands. 


For dynamic menu items (such as recently used files), assign access keys numerically. 
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1 Sun with Moon.png bd 
2 Truck and Car.png 

3 Tree.png 

4 Work Friends.png 


Exit Alt+F4 


In this example, the Paint program in Windows assigns numeric access keys to recently used files. 


Assign unique access keys within a menu level. You can reuse access keys across different menu levels. 


Make access keys easy to find: 
o For the most frequently used menu items, choose characters at the beginning of the first or second word of the label, preferably 
the first character. 


o For less frequently used menu items, choose letters that are a distinctive consonant or a vowel in the label. 
Prefer characters with wide widths, such as w, m, and capital letters. 
Prefer a distinctive consonant or a vowel, such as "x" in "Exit." 


Avoid using characters that make the underline difficult to see, such as (from most problematic to least problematic): 
o Letters that are only one pixel wide, such asi and I. 


o Letters with descenders, such as g, j, p, g, and y. 
o Letters next to a letter with a descender. 


For more guidelines and examples, see Keyboard. 


Shortcut keys 


Assign shortcut keys to the most frequently used menu items. Infrequently used menu items don't need shortcut keys because users 
can use access keys instead. 


Don't make a shortcut key the only way to perform a task. Users should also be able to use the mouse or the keyboard with Tab, 
arrow, and access keys. 


For well-known shortcut keys, use the standard assignments. See Windows Keyboard Shortcut Keys for the well-known shortcut keys 
used by Windows programs. 


Don't assign different meanings to well-known shortcut keys. Because they are memorized, inconsistent meanings for well-known 
shortcuts are frustrating and error prone. See Windows Keyboard Shortcut Keys for the well-know shortcut keys used by Windows 
programs. 


Don't try to assign system-wide program shortcut keys. Your program's shortcut keys will have effect only when your program has 
input focus. 


Document all shortcut keys. Doing so helps users learn the shortcut key assignments. 
o Exception: Don't display shortcut key assignments within context menus. Context menus don't display the shortcut key 
assignments because they are optimized for efficiency. 


For non-standard key assignments: 
o Choose shortcut keys that don't have standard assignments. Never reassign standard shortcut keys. 


Use non-standard key assignments consistently throughout your program. Don't assign different meanings in different 
windows. 


ie) 


ie) 


If possible, choose mnemonic key assignments, especially for frequently used commands. 


Use function keys for commands that have a small-scale effect, such as commands that apply to the selected object. For 
example, F2 renames the selected item. 


ie) 


ie) 


Use Ctrl key combinations for commands that have a large-scale effect, such as commands that apply to an entire document. 
For example, Ctrl+S saves the current document. 


Use Shift key combinations for commands that extend or complement the actions of the standard shortcut key. For example, 
the Alt+Tab shortcut key cycles through open primary windows, whereas Alt+Shift-+Tab cycles in the reverse order. Similarly, F1 
displays Help, whereas Shift+F1 display context-sensitive Help. 


ie) 


Don't use the following characters for shortcut keys: @ Af $ ([]\ ~| *' <>. These characters require different key 
combinations across languages or are locale specific. 


ie) 


© 2010, Microsoft Corporation. All rights reserved. Page 233 of 882 


o Don't use Ctrl+Alt combinations, because Windows interprets this combination in some language versions as an AItGR key, 
which generates alphanumeric characters. 


. If your program assigns many shortcut keys, provide the ability to customize the assignments. Doing so allows users to reassign 
conflicting shortcut keys and migrate from other products. Most programs don't assign enough shortcut keys to need this feature. 


For more guidelines and standard shortcut key assignments, see Keyboard. 


Standard menus 


- Use the standard menu organization for programs that create or view documents. The standard menu organization makes common 
menu items predictable and easier to find. 


- For other types of programs, use the standard menu organization only when it makes sense to. Consider organizing your commands 
and options into more useful, natural categories based on your program's purpose and the way users think about their tasks and goals. 


Standard menu bars 


The standard menu bar structure is as follows. This list shows the menu category and item labels, their order with 
separators, their access and shortcut keys, and their ellipses. 


File 
New Ctrl4+N 
Open... Ctrl4+0 
Close 
<Separator> 
Save Ctrl+S 
Save as... 
<Separator> 
Send to 
<Separator> 
Print... Ctrl+P 
Print preview 
Page setup 
<Separator> 
1 <filename> 
2 <filename> 
3 <filename> 


<Separator> 
Exit Alt+F4 (shortcut usually not given) 


Edit 
Undo Ctrl4Z 
Redo Ctrl+Y 
<Separator> 
Cut Ctri+X 
Copy Ctrl+C 
Paste Ctrl+V 
<Separator> 
Select all Ctrl+A 
<Separator> 
Delete Del (shortcut usually not given) 
<Separator> 
Find... Ctrl+F 
Find next F3 (command usually not given) 
Replace... Ctri+H 
Go to... Ctrl+G 


View 
Toolbars 
Status bar 
<Separator> 
Zoom 
Zoom in Ctrl++ 


Zoom out Ctrl+ 
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<Separator> 
Full screen F1l 
Refresh F5 


Tools 


<separator> 
Options 


Help 
<program name>help F1 
<Separator> 
About <program name> 


Standard toolbar menu buttons 


The standard toolbar menu buttons are as follows. This list shows the menu category and item labels, their order 
with separators, their shortcut keys, and their ellipses. 


Tools 
Full screen F1l = (Reassign access key if Find is also used.) 
Toolbars (Note that the Menu bar command goes here.) 
<Separator> 
Print... 
Find... 
<Separator> 
Zoom 
Text size 
<separator> 
Options 


Organize 

New folder Ctrl4N 
<Separator> 

Cut Ctrl4+x 
Copy Ctrl4C 
Paste Ctrl+V 
<Separator> 
Select all Ctri+A 
<separator> 
Delete Del (shortcut usually not given) 
Rename 
<separator> 
Options 


Page 
New window — Ctrl+N 
<Separator> 
Zoom 
Text size 


Standard context menus 


The standard context menu contents are as follows. This list shows the menu item labels, their order with 
separators, their access keys, and their ellipses. Context menus don't show shortcut keys. 


Open 

Run 

Play 

Edit 

Print... 
<separator> 
Cut 


Copy 
Paste 
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<Separator> 

Delete 

Rename 

<Separator> 

Lock the <object name> (checkmark) 
Properties 


Using ellipses 
While menu commands are used for immediate actions, more information might be needed to perform the 


action. Indicate a command that needs additional information (including a confirmation) by adding an ellipsis 
at the end of the label. 


=| Document - WordPad 
Edit View Insert Format 


Select printer 
New... Ctrl+N “Name Documents _ Status 
Open... Ctrl+O gay Microsoft XPS Document Writer 
Save Ctrl+S 
Save as... 
Print... Ss Ctrl+P 
Print preview... 
Page setup... 
Recent file Page rang 
@ Al Number of copies: 1 
Send... Selection Current page 
Exit © Pages: 165 Collate 


Enter either a single page number or a single 1}1 2)! 3/3 
page range. For example, 5-12 


In this example, the Print... command displays a Print dialog box to gather more information. 


Proper use of ellipses is important to indicate that users can make further choices before performing the 
action, or even cancel the action entirely. The visual cue offered by an ellipsis allows users to explore your 
software without fear. 


This doesn't mean you should use an ellipsis whenever an action displays another window—only when 
additional information is required to perform the action. For example, the commands About, Advanced, Help, 
Options, Properties, and Settings must display another window when clicked, but don't require additional 
information from the user. Therefore they don't need ellipses. 


In case of ambiguity (for example, the command label lacks a verb), decide based on the most likely user 
action. If simply viewing the window is a common action, don't use an ellipsis. 


Correct: 
More colors... 
Version information 


In the first example, users are most likely going to choose a color, so using an ellipses is correct. In the second 
example, users are most likely going to view the version information, making ellipses unnecessary. 


Note: When determining if a menu command needs an ellipsis, don't use the need to elevate privileges as a 
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factor. Elevation isn't information needed to perform a command (rather, it's for permission) and the need to 
elevate is indicated with the security shield. 


Labels 


- Use sentence-style capitalization. 
o Exception: For legacy applications, you may use title-style capitalization if necessary to avoid mixing capitalization styles. 


Menu category names 


- Use menu category names that are single word verbs or nouns. A multiple-word label might be confused for two one-word labels. 


- Prefer verb-based menu names. However, omit the verb if it is Create, Show, View, or Manage. For example, the following menu 
categories don't have verbs: 
o Table 


o Tools 
o Window 


- For non-standard category names, use a single, specific word that clearly and accurately describes the menu contents. While the 
names don't have to be so general that they describe everything in the menu, they should be predictable enough so that users aren't 
surprised by what they find in the menu. 


Menu item names 


- Use menu item names that start with a verb, noun, or noun phrase. 


- Prefer verb-based menu names. However, omit the verb if: 
o The verb is Create, Show, View, or Manage. For example, the following commands don't have verbs: 
a About 


a Advanced 
= Full screen 
a New 

= Options 

= Properties 


o The verb is the same as the menu category name to avoid repetition. For example, in the Insert menu category, use Text, 
Table, and Picture instead of Insert text, Insert table, and Insert picture. 


- Use specific verbs. Avoid generic, unhelpful verbs, such as Change and M anage. 

- Use singular nouns for commands that apply to a single object, otherwise use plural nouns. 

- Use modifiers as necessary to distinguish between similar commands. Examples: Insert row above, Insert row below. 

- For pairs of complementary commands, choose clearly complementary names. Examples: Add, Remove; Show, Hide; Insert, Delete. 
- Choose menu item names based on user goals and tasks, not on technology. 


Correct: 


Format » Windows Media Audio 
Bit rate >| ¥ Windows Media Audio Pro 


Incorrect: 


Codec N >| Windows Media Audio 
Bit rate >| ¥ Windows Media Audio Pro 


In the incorrect example, the menu item is based on its technology. 
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- Use the following menu item names for the stated purpose: 
o Options To display program options. 


o Customize To display the program options specifically related to mechanical UI configuration. 
o Personalize To display a summary of commonly used personalization settings. 

o Preferences Don't use. Use Options instead. 

o Properties To display an object's property window. 

o Settings Don't use as a menu label. Use Options instead. 


Submenu names 


- Menu items that display submenus never have an ellipsis on their label. The submenu arrow indicates that another selection is 


required. 
Incorrect: 
s\) Edit View Tools Message Help 

New... iS » | Mail message 
Open Ctrl+O News message 
——— Folder... Ctrl+Shift+E 
Save attachments. 
Save as stationery... Contact... 


In this example, the New menu item incorrectly has an ellipsis. 
Documentation 
When referring to menus: 


In commands that show or hide menus, refer to menu bars. Don't refer to them as classic menus. 


Refer to menus by their labels. Use the exact label text, including its capitalization, but don't include the access key underscore or 
ellipsis. 


To refer to menu categories, use "On the <category name>menu." If the location of a menu item is clear from the context, you don't 
need to mention the menu category. 


To describe user interaction of menu items, use click, without the word menu or command. Don't use choose, select, or pick. Don't refer 
to amenu item as a menu item except in technical documentation. 


To describe removing a check mark from a menu option, use click to remove the check mark. Don't use clear. 


Refer to context menus as context menus, not shortcut menus. 


Don't use cascading, pull-down, drop-down, or pop-up to describe menus, except in programming documentation. 


Refer to unavailable menu items as unavailable, not as dimmed, disabled, or grayed. Use disabled in programming documentation. 


When possible, format the labels using bold text. Otherwise, put the labels in quotation marks only if required to prevent confusion. 
Examples: 


- On the File menu, click Print to print the document. 
- On the View menu, point to Toolbars, and then click Formatting. 
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Menu Design Concepts 


Menus 


Command Presentation 
To use menus effectively, it helps to understand the characteristics of the various command presentations: 


- Menu bars. A menu bar is best used to catalog all the available top-level commands within a program. New 
users of your program are likely to review all the commands in the menu bar to answer questions like: 
o What can the program do? 


o What commands does the program have? 
o What are the shortcut keys for the common commands? 


Effective menu bars are comprehensive, well organized, and self-explanatory. Efficiency is desirable, but not 
crucial (and often not possible). Consider menu bars to be primarily a learning and discovery tool, especially for 
new users. 


- Toolbars. A toolbar is best used for quick, convenient access to frequently used, immediate commands. They 
don't have to be comprehensive or even self-explanatory—just direct and efficient. 


- Command buttons. Command buttons are a simple, visible, direct way to expose a small number of primary 
commands. However, they don't scale well, so you should use menus in primary windows for more than a few 
commands. 


- Context menus. Context menus are simple, direct, and contextual. They are also efficient because they display 
only the commands and options that apply to the current context. Because they are displayed at the pointer's 
current location, they eliminate the need to move the mouse to display a menu. However, they normally have 
no visible presence on the screen. Consider context menus appropriate only for redundant contextual 
commands and options targeted at advanced users. 


Because of these various tradeoffs, your program may need to use a combination of command presentations. For 
example, full-featured applications often use menu bars, taskbars, and context menus, whereas simple programs 
typically just use command buttons and standard context menus. 


If you do only one thing... 
Choose a command presentation that matches your program type, window types, command usage, and target 
users. 


Effective menu bars 


While menu bars are the most traditional menu type, they aren't suitable for all types of programs or windows. 
Here are some of the factors in using them effectively. 


Keeping simple things simple 


Menu bars aren't used in dialog boxes and should be avoided in simple programs like utilities. The commands in 
such windows should be kept simple, direct, and readily apparent. M enu bars are primarily a learning and 
discovery tool, and simple windows shouldn't require learning or discovery. For dialog boxes, use command 
buttons (including menu buttons and split buttons), command links, and context menus. 


Using screen space efficiently 
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While menu bars use screen space efficiently, they are sufficiently heavy that you should consider alternatives if 
there aren't many commands or they aren't used frequently. For example, toolbar menus are a better choice if a 
program already has a toolbar and needs only a few drop-down menus. 


Making menus stable 


Given the need for learning and discoverability, users expect menu bars to be stable. That is, users expect to see 
the same menu items as they did the last time they used the menu. The menu items can be enabled or disabled 
based on the current context, but menu items or submenus shouldn't be added or removed. However, you may 
add or remove entire menu categories based on obvious changes in program state (such as a document being 
loaded). 


That said, disabled menu items can be confusing because users have to determine why the item is disabled. If the 
reason isn't obvious, users have to determine the problem through experimentation and deductive logic. In such 
cases, it's better to leave the item enabled and give a helpful error message to explain the problem explicitly. 


Menu bar organization 


Menu bars organize menu items into a tree structure. However, there is a dilemma when using trees: Trees are 
intended to organize menu items and make them easy to find, yet it's difficult to make all menu items within a 
menu tree easily discoverable. Menu items that aren't well known or could belong in multiple menu categories 
are especially difficult to find. For example, suppose a menu has Debug and Window categories. Where should 
users look for a Debug window command? 


Using the standard menu categories helps address this dilemma. For example, users know to look for an Exit 
command in the File menu because that is standard. If you know that users are having trouble finding non- 
standard menu items because they could belong in multiple categories, put a small number (one or two) of hard- 
to-find menu items in multiple categories. Anything more harms the overall menu bar usability. 


Standard menu organization 


The standard menu organization makes common menu items predictable and easier to find. However, these 
categories were designed when most applications were used to create or view document files, thus the File, Edit, 
View, Tools, and Help menu categories. This standard organization has little value for other types of programs, 
such as Windows Explorer. 


Don't feel obligated to use the standard menu organization if it isn't suitable for your program. Instead, consider 
organizing your menu items into more useful, natural categories based on your program's purpose and the way 
users think about their tasks and goals. 
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Library tf Burn 
¥. 


Format 


Bit rate > 


Rip CD automatically when inserted > 
Eject CD after ripping 


More options... 


Help with ripping 


In this example, Windows M edia®Player uses non-standard menus that reflect its primary tasks. 


If you choose to use non-standard menu categories, you have the burden of designing good category names. 
These names should use a single, specific word and they should accurately describe their contents. While the 
category names don't have to be so general that they describe everything in the menu, they should be 
predictable enough so that users aren't surprised by what they find in the menu. 


However, if your program is primarily used to create or view documents, most likely you should use the 
standard menu organization. Don't interpret the fact that many built-in Windows applications no longer use 
standard menus to mean that standard menus have been abandoned. They have not. Rather, it means that there 
are more appropriate solutions for programs that aren't focused on document creation. 


Menu bars vs. toolbars 


Many programs provide both a menu bar and a toolbar. There doesn't need to be an exact correspondence 
between menu bar commands and toolbar commands because the attributes of a good menu bar and a good 
toolbar differ. 


A good menu bar is a comprehensive catalog of all the available top-level commands, whereas a good toolbar 
gives quick, convenient access to frequently used commands. A toolbar doesn't attempt to train users—just make 
them productive. Once users learn how to access a command on a toolbar, they rarely continue to access the 
command from the menu bar. 


Focus on delivering the full benefit of each type of menu. Don't worry about consistency between the menu 
types. 


For more information, see Toolbar Design Concepts. 


Menu bars vs. context menus 
Context menus, being contextual, differ from menu bars in the following ways: 


- Context menus show items that apply only to the current context, so, in general, they don't have disabled 
items. Menu bars are intended to be more of a complete catalog of functionality, so they need to be 
comprehensive and stable. 


- Context menus don't show shortcut keys (ironically) because they aren't intended to be a learning tool as menu 


bars are. Keep them simple and efficient. 
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- Context menus have a specific order: most frequently used items first (primary commands), transfer commands 
next, and Properties last. This order is for efficiency and predictability. By contrast, menu bar menus are 
ordered by the relationships among the commands, as well as frequency of use. 


Menu affordance 


Menu bars lack affordance, which means their visual properties don't suggest how they are used. Rather, users 
understand menu bars through experience and identify them by their standard appearance and location. 


The other menu patterns aren't as recognizable and don't have a standard location, so they use the drop-down 


arrow to indicate the presence of a pull-down menu. The need for this arrow might be a factor in your command 
presentation choices. If your program window is cluttered with menu arrows, consider using a menu bar. 


Using icons in menus 


Themed menus in Windows@give you the opportunity to provide icons for menu items. Providing icons has the 
following benefits: 


- Icons emphasize the most commonly used menu items. 
- Distinct icons help users recognize commonly used menu items quickly. 
- Well designed icons help communicate the meaning of their menu items. 


Deciding to use menu icons doesn't mean that you must have icons for all your menu items. In fact, icons have 
better effect if they are reserved for only the most important menu items. 


Command icons are especially difficult to design because commands are actions (verbs), yet icons show objects 
(nouns). Consequently, most command icons are either standard symbols or images of objects that suggest the 
actions. 


Accessibility 


Menu items should be directly accessible using access keys and shortcuts. Doing so helps users who prefer the 
keyboard, including power users who want to work quickly. 


Access keys and shortcut keys have several fundamental differences for menus: 


Access keys: 


Are the underlined character in a menu name. 


Use the Alt key plus an alphanumeric key. 


Are primarily for accessibility. 


Are assigned to all menus. 


Are not intended to be memorized, so they are documented directly in the UI (by underlining the 
corresponding character). 


Aren't assigned consistently across menus (because they can't always be). 


By contrast, shortcut keys: 
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- Use Ctrl and Function key sequences. 
- Are primarily a shortcut for advanced users. 
- Are assigned only to the most commonly used menu items. 


- Are intended to be memorized and are documented only in menus, tooltips, and Help. 


- Must be assigned consistently across programs (because they are memorized and not directly documented in 
the Ul). 


WY Untitled - Paint 
Edit View Image Colors Help 

New Ctrl+N 
Open... Ctri+O 


In this example, the menu has both access and shortcut keys. 


Tip: Access key underlines are usually hidden by default and shown when the Alt key is pressed. To improve 
awareness of the access key assignments in your program, you can display them at all times. In Control Panel, go 
to the Ease of Access Center, and click Make the keyboard easier to use; then select the Underline keyboard 
shortcuts and access keys check box. 
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Toolbars 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Presentation 
Controls and commands 
Organization and order 
Hiding menu bars 
Interaction 
Icons 
Standard menu and split buttons 
Palette windows 
Customization 
Using ellipses 
Recommended sizing and spacing 
Labels 
Documentation 


A toolbar is a graphical presentation of commands optimized for efficient access. 


Menu button Split button Overflow chevron 


suit icon Unlabeled icons Separator 
Qed a AW Hs a 


Some typical toolbars. 


Use toolbars in addition to or in place of menu bars. Toolbars can be more efficient than menu bars because 
they are direct (always displayed instead of being displayed on mouse click), immediate (instead of requiring 
additional input) and contain the most frequently used commands (instead of a comprehensive list). In contrast 
to menu bars, toolbars don't have to be comprehensive or self-explanatorya€”just quick, convenient, and 
efficient. 


Some toolbars are customizable, allowing users to add or remove toolbars, change their size and location, and 
even change their contents. Some types of toolbars can be undocked, resulting in a palette window. For more 
information about toolbar varieties, see Usage patterns in this article. 


Note: Guidelines related to menus, command buttons, and icons are presented in separate articles. 


Is this the right user interface? 


To decide, consider these questions: 


Is the window a primary window? Toolbars work well for primary windows, but are usually overwhelming for secondary windows. 
For secondary windows, use command buttons, menu buttons, and links instead. 


Are there a small number of frequently used commands? Toolbars can't handle as many commands as menu bars, so they work best 
as a way to efficiently access a small number of frequently used commands. 


Are most of the commands immediate? That is, are they mostly commands that don't require additional input? To be efficient, 
toolbars need to have a direct and immediate feel. If not, menu bars are better suited for commands that require additional input. 


Can most of the commands be presented directly? That is, users interact with them using a single click? While some commands can 
be presented using menu buttons, presenting most commands this way undermines the efficiency of the toolbar, making a menu bar 
a better choice. 


- Are the commands well represented by icons? Toolbar buttons are usually represented by icons instead of text labels (although 
some toolbar buttons use both), whereas menu commands are represented by their text. If the command icons aren't high quality 
and aren't self-explanatory, a menu bar may be a better choice. 


If your program has a toolbar without a menu bar, and most of the commands are accessible indirectly through 
menu buttons and split buttons, this toolbar is essentially a menu bar. Apply the toolbar menus pattern in the 
Menus guidelines instead. 
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Design concepts 


A good menu bar is a comprehensive catalog of all the available top-level commands, whereas a good toolbar 
gives quick, convenient access to frequently used commands. A toolbar doesn't attempt to train usersd€”just 
make them productive. Once users learn how to access a command on a toolbar, they rarely continue to access 
the command from the menu bar. For these reasons, a program's menu bar and its toolbar don't need to 
correspond directly. 


Toolbars vs. menu bars 


Traditionally, toolbars are different from menu bars in the following ways: 


Frequency. Toolbars present only the most frequently used commands, whereas menu bars catalog all the available top- 
level commands within a program. 


Immediacy. Clicking a toolbar command takes effect immediately, whereas a menu command might require additional input. 
For example, a Print command in a menu bar first displays the Print dialog, whereas a Print toolbar button immediately prints a 
single copy of a document to the default printer. 


File Edit View Insert Format Help 


Dw aS @ YSBo Bw 


In this example, clicking the Print toolbar button immediately prints a single copy of a document to the default 
printer. 


Directness. Toolbar commands are invoked with a single click, whereas menu bar commands require navigating through the menu. 


Number and density. The screen space required by a toolbar is proportional to the number of its commands and that space is 
always used, even if the commands are not. Consequently, toolbars must use their space efficiently. By contrast, menu bar 
commands are normally hidden from view and their hierarchical structure allows for any number of commands. 


Size and presentation. To pack many commands in a small space, toolbars usually use icon-based commands (with tooltip-based 
labels), whereas menu bars use text-based commands (with optional icons). While toolbar buttons can have standard text labels, 
these do use significantly more space. 


Labeled toolbar buttons take at least three times as much space as unlabeled ones. 


Self-explanatory. Well-designed toolbars need icons that are mostly self-explanatory because users can't find commands efficiently 
just using tooltips. However, toolbars still work well if a few less frequently used commands aren't self-explanatory. 


se Home » Scan |v @ History @: Tools (2) ’ 


In this example, the most frequently used icons are self-explanatory. 


Recognizable and distinguishable. For frequently used commands, users remember toolbar button attributes like location, shape, 
and color. With well-designed toolbars, users can find the commands quickly even if they don't remember the exact icon symbol. 
By contrast, users remember frequently used menu bar command locations, but rely on the command labels for making selections. 


Q Snipping Tool 


x] Cancel G Options 


Drag the cursor around the area you want 
to capture. 


For toolbar commands, distinctive location, shape, and color help make icons recognizable and distinguishable. 
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el Edit View Tools Help 
Open 


Explore 


Create Shortcut 
Delete 
Rename 


Properties 


Close 


For menu bar commands, users ultimately depend upon their labels. 
Efficiency 


Given their characteristics, toolbars must be designed primarily for efficiency. An inefficient toolbar just doesn't 
make any sense. 


If you do only one thing... 
Make sure your toolbars are designed primarily for efficiency. Focus toolbars on commands that are frequently 
used, immediate, direct, and quickly recognizable. 


Hiding menu bars 


Generally, toolbars work great together with menu bars: good toolbars provide efficiency and good menu bars 
provide comprehensiveness. Having both menu bars and toolbars allows each to focus on its strengths without 
compromise. 


Surprisingly, this model breaks down with simple programs. For programs with only a few commands, having 
both a menu bar and a toolbar doesn't make sense because the menu bar ends up being a redundant, inefficient 
version of the toolbar. 


To eliminate this redundancy, many simple programs in Windows Vista ®focus on providing commands solely 
through the toolbar, and hiding the menu bar by default. Such programs include Windows Explorer, Windows® 
Internet Explorer ® Windows M edia®Player, and Windows Photo Gallery. 


This is no small change. Removing the menu bar fundamentally changes the nature of toolbars because such 
toolbars need to be comprehensive and change in the following ways: 


- Frequency. Removing the menu bar means that all commands not available directly from a window or its context menus must 
be accessible from the toolbar, regardless of their frequency of use. 


- Immediacy. Removing the menu bar makes the toolbar the only visible access point for commands, requiring the toolbar to have 
the fully functional versions. For example, if there is no menu bar, a Print command on a toolbar must display the Print dialog 
box instead of printing immediately. (Although using a split button is an excellent compromise in this case. See Standard menu and 
split buttons for the standard Print split button.) 


Fa Print v Ee! E-mail @ Burn + 
am Print... iS Ctrl+P 
@ Order prints... 


In this example, the Print toolbar button in Windows Photo Gallery has a Print command that displays the Print 
dialog box. 


- Directness. To save space and prevent clutter, less frequently used commands may be moved to menu buttons, making them less direct. 


Toolbars used to supplement a menu bar are designed differently than toolbars designed for use with a removed 
or hidden menu bar. And because you can't assume that users will display a hidden menu bar to perform a single 
command, hiding a menu bar should be treated the same as removing it completely when making design 
decisions. (If you hide the menu bar by default, don't assume that users will think of displaying the menu bar to 
find a command or even figure out how to display it.) 


Designing a toolbar to work without a menu bar often involves some compromises. But for efficiency, don't 
compromise too much. If hiding the menu bar results in an inefficient toolbar, don't hide the menu bar! 


Keyboard accessibility ; ; 
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From the keyboard 


, accessing toolbars is quite different from accessing menu bars. Menu bars receive input 


focus when users press the Alt key and they lose input focus with the Esc key. Once a menu bar has input focus, it 
is navigated independently of the remainder of the window, handling all arrow keys, Home, End, and Tab keys. By 
contrast, toolbars receive input focus when users press the Tab key through the entire contents of the window. 
Because toolbars are last in tab order, they might take some significant effort to activate on a busy page (unless 
users know to use Shift+Tab to move backwards). 


Accessibility presents a dilemma here: while toolbars are easier for mouse users, they are less accessible for 


keyboard users. Th 
or hidden. 


is isn't a problem if there is both a menu bar and a toolbar, but it is if the menu bar is removed 


For accessibility reasons, then, prefer to retain the menu bar rather than remove it completely in favor of a 
toolbar. If you must choose between removing the menu bar and simply hiding it, prefer to hide it. 


Usage patterns 


Toolbars have seve 


Primary toolbars 
A toolbar 
designed to 
work without a 
menu bar, either 
hidden or 
removed. 


Supplemental 
toolbars 

A toolbar 
designed to 
work with a 
menu bar. 


Toolbar menus 
A menu bar 
implemented as 
a toolbar. 


Customizable 
toolbars 

A toolbar that 
can be 
customized by 
users. 


Palette windows 
A modeless 
dialog box that 
presents an 
array of 
commands. 


ral usage patterns: 


Primary toolbars must balance the need for efficiency with comprehensiveness, so they work best for simple programs. 


B- Views + System properties jg4 Uninstall’orchangea program © Map network drive 


> 


A primary toolbar from Windows Explorer. 


Supplemental toolbars can focus on efficiency without compromise. 


File Edit View Tools Clip Play Help 


§& Import Media v PR AutoMovie 


A supplemental toolbar from Windows M ovie Maker. 


Toolbar menus are toolbars consisting primarily of commands in menu buttons and split buttons, with only a few direct commands, if 
any. 


@ Burn v 
h 


Data Disc... 
Video DVD... 


A toolbar menu in Windows Photo Gallery. 


Customizable toolbars allow users to add or remove toolbars, change their size and location, and even change their contents. 


File Edit View Refactor Project Build Debug Data Tools Test Window Community Help 
G- 8-@Ga@\|s a2Ba\%- - > Debug + Any CPU + | Bp Settings 


A customizable toolbar from Microsoft Visual Studio ® 


Palette windows are undocked toolbars. 


Colors 


=e SERBS See 


Ratan | saa 
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Palette windows from Windows Paint. 


Toolbars have these styles: 


Unlabeled icons Use this style if there are too many buttons to label or the program is frequently used. With this style, programs with 


One or more 
rows of small 
unlabeled icon 
buttons. 


Large unlabeled 
icons 

A single row of 
large unlabeled 
icon buttons. 


Labeled icons 
A single row of 
small labeled 
icons. 


complex functionality can have multiple rows, and therefore, this is the only style that needs to be customizable. With this style, 
some command buttons can be labeled if they are frequently used. 


Cael 44H +: 2B ® 


Avial + 10 + Westen > BU ® (2B)? 2 F) 


An unlabeled icons toolbar from W ordPad. 


Use this style for simple utilities that have easily recognizable icons and are usually run in small windows. 
+ a = Ue 
FS aerrh 4 & 


Qrnew fa 22 


Large unlabeled icons toolbars from Windows Live Messenger and the Windows Snipping Tool. 


Use this style if there are few commands or the program isn't frequently used. This style always has a single row. 


A labeled icons toolbar from Windows Explorer. 


Partial toolbars —_ Use this style for windows with navigation buttons, a search box, or tabs to eliminate unnecessary weight at the top of the window. 


A partial row of 
small icons used 
to save space 
when a full 
toolbar isn't 
necessary. 


Large partial 
toolbars 

A partial row of 
large icons used 
to save space 
when a full 
toolbar isn't 
necessary. 


Em New Appointment {gj New Task Delete Eig Today 


{> By hv ipPage + 


Partial toolbars can be combined with navigation buttons, a search box, or tabs. 


@ Tools v * 


Use this style for simple utilities that have navigation buttons or a search box to eliminate unnecessary weight at the top of the window. 


A large partial toolbar from Windows Defender. 


Finally, toolbar controls have several usage patterns: 
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Command icon 
buttons 
Clicking a 
command 
button initiates 
an immediate 
action. 


Examples of icon command buttons from Windows Fax and Scan. 


Mode icon me 
buttons =) 
Clicking a mode 
button enters 


the selected 
mode. 
Examples of mode buttons from Windows Paint. 
Property icon 
buttons Segoe Ul~ [12 I Aa Av GS 
A property = ame — 
button's state BlEW-A-#E- 
reflects the state - 
of the currently UXGuide 
selected objects, a 
if any. Clicking 
the button 
applies the Examples of property buttons from Microsoft Word. 
change to the 
selected objects. 
Labeled icon These buttons are used for frequently used toolbar buttons whose icon isn't sufficiently self-explanatory. They 
buttons are also used in toolbars that have so few buttons that each button can have a text label. 
A command 
puten or File Edit View Insert Format Tools Help 
property button 


labeled with an Fi Send @ 6 GS Contacts 
icon anda text 
label. 


A toolbar with its most frequently used buttons labeled. 


Menu buttons =A single downward-pointing triangle indicates that clicking the button shows a menu. 


A command 
button used to " 
present a small iid > ob ~[eopeses]@ toos - 
set of related = LS 
commands. New Window Ctrl+N 
Cut Ctril+X 
Copy Ctrl+C 
Paste Ctrl+V 
Save As... 


Send Page by E-mail... 
Send Link by E-mail... 


Edit with Microsoft Office Word 

Zoom > 
Text Size » 
Encoding » 
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Split buttons 

A command 
button used to 
consolidate 
variations of a 
command, 
especially when 
one of the 
commands is 
used most of the 
time. 


Drop-down lists 
A drop-down list 
(editable or read- 
only) used to 
view or change a 
property. 


Guidelines 


Presentation 


- Choose a suitable toolbar style based on the number of commands and their usage. See the previous toolbar style table for 


A menu button with a small set of related commands. 


fp + Y ssp Page ¥ (Of Tools ¥ a 


A split button in its normal state. 


Like a menu button, a single downward-pointing triangle indicates that clicking the rightmost portion of the 
button shows a menu. 


> BD + ahr] Page © 


Print... eee? 


Print Preview... 


Page Setup... 


A dropped down split button. 


In this example, a split button is used to consolidate all the print-related commands. The immediate Print 
command is used most of the time, so users normally don't need to see the other commands. 


Unlike a menu button, clicking the left portion of the button performs the action on the label directly. Split 
buttons are effective in situations where the next command is likely to be the same as the last command. In this 
case, the label is changed to the last command, as with a color picker: 


Q- 


In this example, the label is changed to the last command. 


O Segoe UI |x] 9 + |Westem 7| BFUB 
i! Segoe Ul 
O Showcard Gothic 
O Shnuti 
O SimHei 
O Simplified Arabic 
O Simplified Arabic Fixed 
O SimSun 
O SimSun-EtB 
Small Fonts 
O Snap ITC od 


In this example, drop-down lists are used to view and set font attributes. 


A drop-down list in a toolbar reflects the state of the currently selected object, if any. Changing the list changes 
the selected object's state. 


guidance on how to choose. Avoid using a toolbar configuration that takes too much space from the program work area. 


- Place toolbars just above the content area, below the menu bar and address bar, if present. 


- If space is at a premium, save space by: 
o Omitting the labels of well-known icons and less frequently used commands. 


o Using only a partial toolbar instead of the entire window width. 


o Consolidating related commands with a menu button or split button. 


o Using an overflow chevron to reveal less frequently used commands. 


> Displaying commands only when they apply to the current context. 


== - »> 
[™ Microsoft Corporation | | fm + y mm vy (:) Page v iG Tools v | 
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The Windows Internet Explorer toolbar saves space by omitting labels of well-known icons, using a partial toolbar, 
and using an overflow chevron for less frequently used commands. 


- For the unlabeled icons toolbar pattern, use a default configuration with no more than two rows of toolbars. If more than two 
rows might be useful, make the toolbars customizable. Starting with more than two rows can overwhelm users and take too 
much space from the program work area. 


Incorrect: 


@ WindowsApplication1 - Microsoft Visual Studio 


File Edit View Project Build Debug Data Format Tools Window 
O-e-Sa@|saal9-o-G-B\> - 
> mw m@ | > SECS Cel He | B~pitt |e & S| it oo mh 


A default configuration with more than two rows of toolbars results in too much visual clutter. 

- Disable individual toolbar buttons that don't apply to the current context, instead of removing them. Doing so makes toolbar 
contents stable and easier to find. 

- Disable individual toolbar buttons if clicking on them would directly result in an error. Doing so is necessary to maintain a direct feel. 


- For the unlabeled icons toolbar pattern, remove entire toolbars if they don't apply to the current context. Display them only in 
the applicable modes. 


@ WindowsApplication1 - Microsoft Visual Studio 


File Edit View Project Build Debug Data Format 


Sl - fl ~- 
r 
jt) Form1.vb [Design] | — 


4 
In this example, the Debug toolbar is shown only when the program is being run. 


- Display toolbar buttons left aligned. The Help icon, if present, is right aligned. 


My Organize + (Views + MM SlideShow [fy Sharing Settings 


All toolbar buttons are left aligned except for Help. 


Exception: Windows 7-style toolbars left align program specific commands, but right align standard, well-known commands such 
as Options, View, and Help. 


- Don't change toolbar button labels dynamically. Doing so is confusing and unexpected. However, you can change the icon to reflect 
the current state. 


In this example, the icon is changed to indicate the default command. 


Controls and commands 


- Prefer the most frequently used commands. 
o Forprimary toolbars, provide comprehensive commands. Primary toolbars don't have to be as comprehensive as menu bars, but 
they have to provide all the commands that aren't readily discoverable elsewhere. Primary toolbars don't need to have commands for: 
= Commands that are directly on the UI itself. 


= Commands typically accessed through context menus. 
= Standard, well-known commands like Cut, Copy, and Paste. 


> For supplemental toolbars, provide commands that are used the most frequently. M enu bar commands are a superset of the 
toolbar commands, so you don't have to provide everything. Focus on quick, convenient command access and skip the rest. 


- Prefer direct controls. Use toolbar buttons in the following order of preference: 
> Icon button. Direct and takes minimal space. 


> Labeled icon button. Direct, but takes more space. 
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o Split button. Direct for the most common command, but handles command variations. 
o Menu button. Indirect, but presents many commands. 


- Prefer immediate commands. For commands that can either be immediate or have additional input for flexibility: 
o For primary toolbars, use the flexible versions of commands, (such as Print...). 


o For supplemental toolbars, use the immediate versions in the toolbar (such as Print) and use flexible versions in the menu bar (such 
as Print...). 


- Provide labels for frequently used commands, especially if their icons aren't well-known icons. 


Acceptable: 


|=) New Fax 


File Edit View Insert Format Tools Help 


FE Send | (@ & GS Contacts 


The Windows Fax and Scan toolbar has few commands, so the better version labels the most important ones. 
« Don't put commands in toolbar menus that are also directly on the toolbar. 


Incorrect: 


Print... 
Browse Help 


Working with fol T= Size 


Folders have been update deel ties neta 


and better functionality i 
You can use folders to navigate 


In this example, Print is directly on the toolbar, so it doesn't need to be in the menu. 
Organization and order 


- Organize the commands within a toolbar into related groups. 


- Place the most frequently used groups first. Within a group, put the commands in their logical order. Overall, the commands 
should have a logical flow to make them easy to find, while still having the most frequently used commands appear first. Doing so 
is most efficient, especially if there is overflow. 


Use group dividers only if the commands across groups are weakly coupled. Doing so makes the groupings obvious and the 
commands easier to find. 


WF Create Mail vy M* Reply @® Reply All #® Forward 


e. Send | ™ | & GS Contacts 


Examples of grouped toolbars from Windows M ail. 


Avoid placing destructive commands next to frequently used commands. Use either order or grouping to get separation. Also, 
consider not placing destructive commands in the toolbar, but only in the menu bar or context menus instead. 


Acceptable: 


Better: 
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In the better example, the Delete command is physically separated from Print. 


Use the overflow chevron to indicate that not all commands can be displayed. But use overflow only if there isn't sufficient room 
to display all the commands. 


Incorrect: 


we | EZ Microsoft Corporation | 


The overflow chevron indicates that not all commands are displayed, but more of them could be with a better 
layout. 


Make sure that the most frequently used commands are directly accessible from the toolbar (that is, not in overflow) in 
small window sizes. If necessary, reorder the commands, move less frequently used commands to menu buttons or split buttons, 
or even remove them completely from the toolbar. If this remains a problem, reconsider your choice of toolbar style. 


Hiding menu bars 


Generally, toolbars work great together with menu bars because having both allows each to focus on their 
strengths without compromise. 


- Hide the menu bar by default if your toolbar design makes having a menu bar redundant. 
- Hide the menu bar instead of removing it completely, because menu bars are more accessible for keyboard users. 


- To restore the menu bar, provide a M enu bar checkmark option in the View (for primary toolbars) or Tools (for secondary 
toolbars) menu category. For more information, see Standard menu and split buttons. 


- Display the menu bar when users press the Alt key, and set input focus on the first menu category. 


Interaction 


- On hover, display the button affordance to indicate that the icon is clickable. After the tooltip timeout, display the tooltip or infotip. 


- . LS 
wy, Organize y "SS Views ve Taba Tate 


_ Date taken Display all or the selected pictures 
and videos in this folder as a slide 
show. 


This example shows the various display states. 
« On left single-click: 
o For command buttons, interact with the control as normal. 


o For mode buttons, display the control to reflect the currently selected mode. If the mode affects the behavior of mouse interaction, 
also change the pointer. 


WY Untitled - Paint 
File Edit _View Image _ Colors Help 


In this example, the pointer is changed to show the mouse interaction mode. 
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o For property buttons and drop-down lists, display the control to reflect the state of the currently selected objects, if any. 
On interaction, update the control's state and apply the change to the selected objects. If nothing is selected, do nothing. 
- On left double-click, perform the same action as a left single-click. 


o Exception: On rare occasions, a toolbar command can be used more efficiently modally. In such cases, use double-click to toggle 
the mode. 


Page Layout References Mailings 


|Calibri (Body) [r=] a] 25/5) 
[Bol U~ abe x, x Aa || ~ A-||Al/@) 


Format Painter (Ctri+Shift+O) 


Copy formatting from one place 
and apply it to another. 


Double-click this button to apply 
the same formatting to multiple 
places in the document. 


@ Press Fi for more help. 


In this example, double-clicking the Format painter command enters a mode where all subsequent clicks apply the 
format. Users can leave the mode by left single-clicking. 


« On right-click: 


o For customizable toolbars, display the context menu for customizing the toolbar. Display the menu on right-click on mouse down, 
not mouse up. 


o For other toolbars, do nothing. 
Icons 


- Provide icons for all toolbar controls except drop-down lists. 


Drop-down lists don't need icons, but all other toolbar controls do. 


Exception: Windows 7-style toolbars use icons only for commands whose icons are well known; otherwise they use text labels 
without icons. Doing so improves the clarity of the labels, but requires more space. 


- Make sure toolbar icons are clearly visible against the toolbar background color. Always evaluate toolbar icons in context and in 
high-contrast mode. 


Choose icon designs that clearly communicate their purpose, especially for the most frequently used commands. Well- 
designed toolbars need icons that are self-explanatory because users can't find commands efficiently using their tooltips. 
However, toolbars still work well if icons for a few less frequently used commands aren't self-explanatory. 


- Choose icons that are recognizable and distinguishable, especially for the most frequently used commands. M ake sure the icons 
have distinctive shapes and colors. Doing so helps users find the commands quickly even if they don't remember the icon symbol. 


- Make sure toolbar icons conform to the Aero-style icon guidelines. 
For more information and examples, see Icons. 


Standard menu and split buttons 


If you are using menu buttons and split buttons in a toolbar, try to use the following standard menu structures 
and their relevant commands whenever possible. Unlike menu bars, toolbar commands don't take access keys. 


Primary toolbars 
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These commands mirror the commands found in standard menu bars, so they should be used only for primary 
toolbars. This list shows the button labels (and type) with their order and separators, shortcut keys, and ellipses. 
Note that the command for displaying and hiding the menu bar is in the View menu. 


File 
New Ctrl+N 
Open... Ctrl+0 
Close 
<separator> 
Save Ctrl+S 
Save as... 
<separator> 
Send to 
<separator> 
Print... Ctrl+P 
Print preview 
Page setup 
<separator> 
Exit Alt+F4 (shortcut usually not given) 
Edit (menu button) 
Undo Ctrl4+Z 
Redo Ctri+Y 
<separator> 
Cut Ctrl4+x 
Copy Ctrl4C 
Paste Ctrl+V 
<separator> 
Select all Ctrit+A 
<separator> 
Delete Del (shortcut usually not given) 
Rename... 
<separator> 
Find... Ctrl +F 
Find next F3 (command usually not given) 
Replace... Ctri+H 
Go to... Ctrl4G 
Print (split button) 
Print... Ctrl+P 
Print preview 
<separator> 
Page setup 
View (menu button) 
Menu bar (check if visible) 


Details pane (check if visible) 
Preview pane (check if visible) 
Status bar (check if visible) 
<separator> 
Zoom 
Zoom in Ctrl++ 
Zoom out Ctri+ 
<separator> 
Text size (selected setting has bullet) 
Largest 
Larger 
Medium 
Smaller 
Smallest 
<separator> 
Full screen Fll 
Refresh F5 


Tools (menu button) 


<separator> 
Options 

Help (split button, use the Help icon) 
<program name>help F1 


<separator> 
About <program name> 


Supplemental toolbars 
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These commands supplement standard menu bars. This list shows the button labels (and type) with their order 
and separators, shortcut keys, and ellipses. Note that the command for displaying and hiding the menu bar is in 


the Tools menu. 


Print (split button) 
Print... Ctrl+P 
Print preview 
<separator> 
Page setup 
Tools (menu button) 
Menu bar (check if visible) 
Details pane (check if visible) 
Preview pane (check if visible) 
Status bar (check if visible) 
<separator> 
Print... (if not elsewhere) 
Find... 
<separator> 
Full screen Fll 
Refresh F5 
<separator> 
Zoom 
Zoom in Ctrl++ 
Zoom out Ctri+ 
<separator> 
Text size (selected setting has bullet) 
Largest 
Larger 
Medium 
Smaller 
Smallest 
<separator> 
Options 
Organize (menu button) 
New folder = Ctrl+N 
<separator> 
Cut Ctrl+xX 
Copy Ctrl+C 
Paste Ctrl+V 
<separator> 
Select all Ctri+A 
<separator> 
Delete Del (shortcut usually not given) 
Rename 
<separator> 
Options 
Page (menu button) 
New window Ctrl+V 
<separator> 
Zoom 
Zoom in Ctrlt++ 
Zoom out Ctri+ 
<separator> 
Text size (selected setting has bullet) 
Largest 
Larger 
Medium 
Smaller 
Smallest 


The supplemental toolbar category names differ from the standard menu category names because they need to 
be more encompassing. For example, the Organize category is used instead of Edit because it contains commands 
that aren't related to editing. To maintain consistency between menu bars and toolbars, use the standard menu 
category names if doing so wouldn't be misleading. 


Incorrect: 
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File View 


Tools Help 


Undo 


Name Redo 


Cut 
Copy 


Paste 


Select all 


Delete 


Ctrl+Z 
Ctrl+¥ 
Ctrl+X 
Ctrl+C 
Ctrl+V 
Ctrl+A 
Del 


wy Organize — 
Ls 
Undo 
Redo 


Cut 
Copy 


Paste 


Select all 


Delete 


= 
m= 


Views 


~ System properties 


Ctrl+Z 
Ctrl+¥Y 
Ctrl+X 
Ctrl+C 
Ctrl+V 
Ctrl+A 
Del 


Free Space 


In this example, the toolbar should use Edit instead of Organize for consistency because it has the standard Edit 


menu commands. 


Palette windows 


- Palette windows use shorter title bars to minimize their screen space. Put a Close button on the title bar. 


- Set the title bar text to the command that displayed the palette window. 


. Use sentence-style capitalization without ending punctuation. 


- Provide a context menu for window management commands. Display this context menu when users right-click on the title bar. 


In this example, users can right-click on the title bar to display the context menu. 


- When possible and useful, make palette windows resizable. Indicate that the window is resizable, using resize pointers when over 


the window frame. 


- When a palette window is redisplayed, display it using the same state as last accessed. When closing, save the window size 
and location. When redisplaying, restore the saved window size and location. Also, consider making these attributes persistent 


across program instances on a per user basis. 


Customization 


Simple toolbars with few commands don't need customization. 


Provide customization for toolbars consisting of two or more rows. Only the unlabeled icons style needs customization. 


Provide a good default configuration. Users shouldn't have to customize their toolbars for common scenarios. Don't depend upon 


users customizing their way out of a bad initial configuration. Assume that most users won't customize their toolbars. 


- Provide a context menu with the following commands: 
> Acheck box list to display the available toolbars 


o Lock/Unlock toolbars 


o Customize... 


- Lock customizable toolbars by default, to prevent accidental changes. 


- For the Customize command, display an options dialog box that provides the ability to choose which toolbars are displayed and 


the commands on each toolbar. 
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| Class Designer 
Context Menus 
Data Design 
Database Diagram 
Debug 


| Debug Location 
|| Device 

[|] Dialog Editor 

| Distributed System Designers 
|| Formatting 

Help 

HTML Source Editing 

Image Editor 

Layout 


([] Use large icons 


Show ScreenTips on toolbars 


‘¥| Show shortcut keys in ScreenTips 


Rejen} (“Go 


In this example, Visual Studio provides an options dialog box to customize its toolbars. 


- Provide a Reset command to return to the original toolbar configuration in the Customize options dialog box. 


- Provide the ability to customize the toolbars using drag-and-drop in the following ways: 
o Set toolbar order and positions. 


o Set toolbar lengths, displaying any toolbars that are too small to display their contents with an overflow chevron. 


o If supported, undock toolbars to become palette windows and vice versa. 


When the Customize options dialog box is displayed: 
o Set the toolbar contents. 


o Set the order of the toolbar contents. 
Doing so allows users to make changes more directly and efficiently. 
- Save all toolbar customizations, on a per-user basis. 


Using ellipses 
While toolbar commands are used for immediate actions, sometimes more information is needed to perform the 


action. Use an ellipsis to indicate that a command requires more information before it can take effect. Put the 
ellipsis at the end of the tooltip and label, if there is one. 


In this example, the Print... command displays a Print dialog box to gather more information. 


If acommand cannot take effect immediately, however, no ellipsis is required. So, for example, sharing settings 
doesn't have an ellipsis even though it needs additional information, because the command can't possibly take 
effect immediately. 


M@ Slide Show 


Set up the Public folder for network 
access. 


The Sharing Settings command doesn't have an ellipsis because it can't take effect immediately. 
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Because toolbars are constantly displayed, and space is at a premium, ellipses should be used infrequently. 


Note: For menus displayed by a toolbar, apply the menu ellipses guidelines. 


Recommended sizing and spacing 


2 pixels 
= —_--- 1 pixel 
‘sp Page vGi Tools) 
sr ==----1 pixel 
3 pixels 


28 pixels [le Page ¥ ||<j Tools v 


16x16 pixels 


Recommended sizing and spacing for standard toolbars. 


Labels 


General 


- Use sentence-style capitalization. 
o Exception: For legacy applications, you may use title-style capitalization if necessary to avoid mixing capitalization styles. 


Unlabeled icon buttons 


- Usea tooltip to label the command. For the tooltip text, use what the label would be if the button were labeled, but include 
the shortcut key if there is one. 


fi >| dah) | Ep Page + G Tools ~ 
Ls 


An example of an icon button tooltip. 


Labeled icon buttons 


- Use a concise label. Use a single word if possible, four words maximum. 


- Place the label to the right of the icon. 
- Use an infotip to describe the command. Because the buttons are labeled, using a tooltip instead of an infotip would be redundant. 


+ 


Sa are 
iz] Share the selected files and folders 
with other people on the network. 


An example of a labeled icon button infotip. 


E-mail 


Drop-down lists 


. Ifthe list always has a value, use the current value as the label. 


Anal ~ 10 ~ Westem ¥ 


In this example, the currently selected font name acts as the label. 


- Ifan editable drop-down list doesn't have a value, use a prompt. 


In this example, a prompt is used for the drop-down list's label. 
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Menu buttons and split buttons 


Prefer verb-based menu button names. However, omit the verb if it is Create, Show, View, or Manage. For example, Tools and 
Page menu buttons don't have verbs. 


Use a single, specific word that clearly and accurately describes the menu contents. While the names don't have to be so general 
that they describe everything in the menu, they should be predictable enough so that users aren't surprised by what they find in 
the menu. 


While not required, provide infotip descriptions if they are helpful. 


Menu items 


Use menu item names that start with a verb, noun, or noun phrase. 


Prefer verb-based menu names. However, omit the verb if it is Create, Show, View, or Manage. For example, the following 
commands don't use verbs: 
> About 


> Advanced 
> Full screen 
> New 
> Options 
> Properties 
Use specific verbs. Avoid generic, unhelpful verbs, such as Change and Manage. 
Use singular nouns for commands that apply to a single object, otherwise use plural nouns. 
For pairs of complementary commands, choose clearly complementary names. Examples: Add, Remove; Show, Hide; Insert, Delete. 
Choose menu item names based on user goals and tasks, not on technology. 


Use the following menu item names for the stated purpose: 
> Options: To display program options. 


> Customize: To display the program options specifically related to mechanical UI configuration. 
> Personalize: To display a summary of commonly used personalization settings. 

> Preferences: Don't use. Use Options instead. 

> Properties: To display an object's property window. 

> Settings: Don't use as a menu label. Use Options instead. 


Menu items that display submenus never have an ellipsis on their label. The submenu arrow indicates that another selection 
is required. 


Documentation 


When referring to toolbars: 


If there is only one toolbar, refer to it as the toolbar. 


If there are multiple toolbars, refer to them by name, followed by the word toolbar. Refer to the main toolbar that is on by default 
and contains buttons for basic tasks, such as opening and printing a file, as the standard toolbar. 


Toolbar is a single, uncapitalized word. (By contrast, menu bar is two words.) 

Refer to toolbar buttons by their tooltip labels. Use the exact label text, including its capitalization, but don't include any ellipsis. 
Refer to toolbar menu buttons by their labels and the word menu. Use the exact label text, including its capitalization. 

Refer to toolbar controls generally as toolbar buttons. 


To describe user interaction, use click for toolbar buttons and read-only drop-down lists, and enter for editable drop-down lists. 
Don't use choose, select, or pick. 


Don't use cascading, pull-down, drop-down, or pop-up to describe menu buttons, except in programming documentation. 
Refer to unavailable items as unavailable, not as dimmed, disabled, or grayed. Use disabled in programming documentation. 
When possible, format the labels using bold text. Otherwise, put the labels in quotation marks only if required to prevent confusion. 


Examples: 


On the Page menu on the toolbar, click Send page by e-mail. 
In the Fonts box on the toolbar, enter "Segoe UI." 
On the Formatting toolbar, point to Show, and then click Comments. 
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Ribbons 


Ribbons are the modern way to help users find, understand, and use commands efficiently and directly—with a 
minimum number of clicks, with less need to resort to trial-and-error, and without having to refer to Help. 


Is this the right user interface? 


Design concepts 
Guidelines 
Tabs 


Contextual tabs 


Modal tabs 


Standard ribbon tabs 


Groups 


Standard ribbon groups 


Commands 
General 
Presentation 
Interaction 

Galleries 

Previews 

Icons 


Enhanced tooltips 
Access keys and keytips 
Application buttons 


Quick Access Toolbars 
Dialog box launchers 


Labels 
Documentation 


Ribbon Design Process 


A ribbon is a command bar that organizes a program's features into a series of tabs at the top of a window. Using 
a ribbon increases discoverability of features and functions, enables quicker learning of the program as a whole, 
and makes users feel more in control of their experience with the program. A ribbon can replace both the 
traditional menu bar and toolbars. 


Application button 


Quick access toolbar 


Document.docx - Microsoft Word 


rh 


Paste 


Clipboat... 


| Home) Insert Page Layout 


do 


=a 
Z 


ta 


Contextual tab set 


Contextual tab 


Table Tools 


References Mailings 


View Design Layout 


Calibri (Body) yl + 
BZ U~ abe x, = 2) es 


WY ~ AN |Aar||A A 
Font LF Paragraph 


[$=] 
Ex = [ESI 


FA 


— Change Editing 
| Styles + ’ 
‘Styles FT 


AaBbCcDc|| AaBbCcDc AaBbCi 


T Normal | No Spaci... Heading1 


A typical ribbon. 


Font Color 


Change the text color. 


@) Press Fi for more help. 


Enhanced tooltip 


J 
In-Ribbon gallery 
Dialog box launcher 


Ribbon tabs are composed of groups, which are a labeled set of closely related commands. In addition to tabs 
and groups, ribbons consist of: 


as file-related commands. 


Core tabs are the tabs that are always displayed. 


An Application button, which presents a menu of commands that involve doing something to or with a document or workspace, such 


A Quick Access Toolbar, which is a small, customizable toolbar that displays frequently used commands. 


Contextual tabs, which are displayed only when a particular object type is selected. Tabs that are always displayed are called core tabs. 
A tab set is a collection of contextual tabs for a single object type. Because objects can have multiple types (for example, a header in 


a table that has a picture is three types), there can be multiple contextual tab sets displayed at atime. 


Modal tabs, which are core tabs displayed with a particular temporary mode, such as print preview. 
Galleries, which are lists of commands or options presented graphically. A results-based gallery illustrates the effect of the commands 


or options instead of the commands themselves. An in-ribbon gallery is displayed within a ribbon, as opposed to a pop-up window. 


Enhanced tooltips, which concisely explain their associated commands and give the shortcut keys. They may also include graphics 


and references to Help. Enhanced tooltips reduce the need for command-related Help. 


- Dialog box launchers, which are buttons at the bottom of some groups that open dialog boxes containing features related to the group. 
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Ribbons were originally introduced with M icrosoft Office 2007. To learn why Office needs to use ribbons and the 
many problems using a ribbon solves, see The Story of the Ribbon. 


For more information about how to apply a ribbon to a program that currently uses traditional menus and 
toolbars, see Ribbon Design Process. 


Note: Guidelines related to menus, toolbars, command buttons, and icons are presented in separate articles. 


To license the Office UI, see Office UI Licensing. 


Is this the right user interface? 
To decide to use a ribbon, consider these questions: 
Program type 


- What type of program are you designing? The program type is a good indicator of the appropriateness of a ribbon. Ribbons work 
well for document creation and authoring programs, as well as document viewers and browsers. Ribbons might work for other types 
of programs, but other forms of command presentation may be more appropriate. Generally, lightweight programs should have 
a lightweight command presentation. (For a list of program types, see the Program Command Patterns.) 


Discoverability and learning issues 


- Do users have trouble finding commands? Are users requesting features that are already in the program? If so, using a ribbon 
will make commands easier to find by having self-explanatory labels and grouping of related commands. Using a ribbon also 
scales better than menu bars and toolbars for future growth. 


- Do users have trouble understanding the program's commands? Do they often resort to "trial and error" to select the right 
command or determine how commands work? If so, using a ribbon with results-oriented commands based on galleries and 
live previews makes commands easier to understand. 


Command characteristics 


- Are the commands presented in several locations? If your program already exists, are commands presented in menu bars, 
toolbars, task panes, and within the work area itself? If so, using a ribbon will unify the commands into a single location, making 
them easier to find. 


- Do the commands apply to the entire window or only to specific panes? Ribbons work best for commands that apply to the 
entire window or to specific objects. In-place commands work better for individual window panes. 


- Can most of the commands be presented directly? That is, can users interact with them using a single click? If commonly 
used commands are accessed from menus and dialog boxes, can they be refactored to be direct? While some commands can 
be presented using menus and dialog boxes, presenting most commands this way undermines the efficiency of a ribbon, 
possibly making a menu bar a better choice. 


Command scale 


- Is there a small number of commands? Can the most frequently used commands be presented easily on a single, simple 
toolbar? Using a ribbon is worthwhile if adding core and contextual tabs results in a simple Home tab that can be used alone to 


perform the most common tasks. If not, the benefit of using a ribbon might not justify its extra weight for a small number of commands. 


- Is there a large number of commands? Would using a ribbon require more than seven core tabs? Would users constantly have 
to change tabs to perform common tasks? If so, using toolbars (which don't require changing tabs) and palette windows (which 
may require changing tabs, but there can be several open at a time) might be a more efficient choice. 


- Do users tend to use a small number of commands most of the time? If so, they can use a ribbon efficiently by putting such 
commands on the Home tab. Constantly changing tabs would make a ribbon too inefficient. 


- Does the program benefit from making the content area of the program as large as possible? If so, using a menu bar and a 
single toolbar is more space efficient than a ribbon. However, if your program requires three or more rows of toolbars or uses 
task panes, using a ribbon is more space efficient. 


- Do users tend to work in a specific area within a large window in the program for long periods of time? If so, they would benefit 
from the close proximity of mini-toolbars, palette windows, and direct commands. M aking the round trip from the work area to 
the ribbon would be too inefficient. 


- For efficiency and flexibility, do users need to make significant changes to the command presentation contents, location, or size? 
If so, customizable and extensible toolbars and palette windows are a better choice. Note that some types of toolbars can be 
undocked to become palette windows, and palette windows can be moved, resized, and customized. 


Finally, consider this ultimate question: Is the improvement in discoverability, ease of learning, efficiency, and 
productivity worth the cost of the extra space and the need for tabs to organize commands? If so, using a 
ribbon is an excellent choice. If you're not sure, consider usability testing a ribbon-based design and comparing it 
to the best alternative. 


Ribbons are a new and engaging form of command presentation, and a great way to modernize a program. But as 
compelling as they are, they aren't the right choice for every program. 
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Incorrect: 


Calculator 


~— | Numbers Arithmetic Memory Advanced @ 


- jie 
Qe 


Point | 


| | [= Backspace | 


Clear 


Please don't do this! 
Design concepts 
Adapting a ribbon in an existing program 


While you might simply refactor a traditional menu bar and toolbar design of an existing program to a ribbon 
format, doing so misses most of the value of using a ribbon. Ribbons have the most value when used to present 
immediate, results-oriented commands, often in the form of galleries and live previews. Results-oriented 
commands make commands easier to understand and users much more efficient and productive. Instead of 
refactoring your existing commands, it's better to redesign completely how commands are performed in your 
program. 


Don't underestimate the challenge of creating an effective ribbon. And don't take for granted that using a ribbon 
automatically makes your program better. Creating an effective ribbon takes a lot of time and effort. Being willing 
to commit the time and effort required for such a command redesign is an important factor in deciding to use a 
ribbon. 


For more information about migrating commands to a ribbon in an existing program, see Ribbon Design Process. 


The nature of ribbons 
Compared to traditional menu bars and toolbars, ribbons have the following characteristics: 


- Asingle user interface (UI) for all commands. M enu bars are comprehensive and easy to learn, and toolbars are efficient and direct, 
but why not use a bit more screen space to create a single commands UI that accomplishes all of these? With only one UI, ribbons 
don't require users to figure out which UI has the command they are looking for. 


Visible and self-explanatory. M enu bar commands are self-explanatory through their labels, but are hidden from view most of the 
time. To save screen space, toolbar buttons are primarily represented by icons instead of labels (although some toolbar buttons 
use both), and depend on tooltips when the icon isn't self-explanatory. However, users generally know the icons only for the 

most commonly used commands. 

By presenting most commands with labeled icons, ribbon commands are both visible and self-explanatory, and use tooltips only 
to provide supplemental information. There's little need to go elsewhere (such as Help) to understand a command. 


Labeled grouping. While menu categories are labeled, groups within a drop-down menu are not and are indicated only with 
an unlabeled separator. Groups within toolbars are also indicated with unlabeled separators. 
By organizing commands in labeled groups, ribbons make it easier to find commands and determine their purpose. 


Modal but not hierarchical. M enu bars scale by creating a hierarchy of commands. Menus with many items can use one or more 
levels of submenus to provide more commands. 

Ribbon commands require more space than toolbar commands, so they use tabs to scale. This use of tabs makes ribbons 

modal, requiring users to change modes occasionally to find commands. However, within a tab most commands are either direct or 
use a Single split button or menu button, not a hierarchy. 


Direct and immediate. A command is direct if invoked with a single click (that is, without navigating through menus) and immediate if 
it takes effect immediately (that is, without dialog boxes to gather additional input). Menu bar commands are always indirect and 
often not immediate. Like toolbars, most ribbon commands are designed to be direct and immediate, with the most frequently 

used commands invoked with a single click, and without requiring a dialog to gather additional input. 


Spacious. M enu bars and toolbars are primarily designed to be space efficient. To provide their benefits, ribbons may consume 
more vertical space, being roughly the equivalent of a menu bar plus three rows of toolbars. Being that few programs have three 
or more rows of toolbars, ribbons usually consume more space than traditional Uls for commands. 


Has an Application button and Quick Access Toolbar. A ribbon is always presented with an Application button and Quick 
Access Toolbar. Doing so allows users to access file-related and frequently used commands without changing tabs, and 
promotes consistency across programs. 


Minimal customization. While menu bars have a fixed presentation, many toolbars are quite customizable, allowing users to 
set locations, sizes, and contents. A ribbon itself is not customizable, but the Quick Access Toolbar provides limited customization. 


Improved keyboard accessibility. Menu bars have excellent keyboard accessibility because pressing the Alt key directly gives the 
menu bar input focus. However, there is no such mechanism for toolbars because they share keyboard navigation with the 
window's content. Consequently, users must navigate to the toolbar using the Tab key (which is given the last tab stop), and 
then navigate to a specific command using the arrow keys. 
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By contrast, ribbons provide enhanced keyboard accessibility through keytips, usually with a three-step process: 
1. Press Alt to enter keytip mode. 


2. Press a character to choose a tab, the Application button, or a command in the Quick Access Toolbar. 
3. Within a tab, press a one or two letters to choose a command. 


This approach is highly visual. It is also more flexible, allowing it to scale better and to have more mnemonic 
access key assignments. 


Don't confuse access keys with shortcut keys. While both access keys and shortcut keys provide keyboard access 
to UI, they have different purposes and guidelines. For more information, see Keyboard. 


The nature of rich commands 


Rich commands refer to the presentation and interaction of commands used by ribbons, without necessarily 
using a ribbon container. Rich commands have these characteristics: 


- Labeling. All commands are given self-explanatory labels, with exceptions only when the icons are extremely well known and space is 


at a premium. 
Correct: 


Calibri vill + |v a |{25} Ea a 


Bol Dn abe x x Aa A | 


These commands are extremely well known so they don't need labels. 
Incorrect: 

[Ede Lat ccs laa || fis] 

fice) ed a0) ara : 

These unintelligible icons require labels for rich commands. 


Sizing. Instead of uniform sizing, commands are sized relative to their frequency of use and importance. In addition to making the 
most frequently used commands easier to find and click, it also makes them more touchable. 


| So wp Reject ~ 
| ®} Previous 
Accept 

~ BPNext 


Changes 


In this example, the most frequently used button is larger than the others. 


Dynamic sizing. Rich command controls resize themselves to take full advantage of the available space, as opposed to using a fixed 
size and either truncating or using overflow when the size is too small. 


Ell [-) Ella) (p Shapes ~ 
Vixal a » Vial ie 
au le ® SmartArt 
Picture Clip Shapes SmartArt Chart Picture Clip 
Art . Art alg Chart 


Illustrations Illustrations 


In this example, the command buttons resize to work well in the available space. 


- Split buttons. Split buttons are a good way to consolidate a set of variations of a command when needed, while maintaining 
directness for the most frequently used command. 
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New Save a copy of the document 

~ Word Document 

—=]| Save the document in the default file 
Open format. 

wit Word Template 
Save ==] Save the document as a template that can 


be used to format future documents. 


Word 97-2003 Document 


=| Save a copy of the document that is fully 


compatible with Word 97-2003. 


FS PDF or XPS 
~~ XPS file. 
Prepare > eS Other Formats 


all possible file types. 
Send » 


i 
a 
al 
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a 


Publish a copy of the document as a PDF or 


Open the Save As dialog box to select from 


In this example, the Save As command uses a split button, where the main button performs the most common 
variation and the menu portion reveals a menu with variations of the command. 


- Rich drop-down menus and galleries. Drop-down menus, drop-down lists, and galleries take the space they need to communicate 
and differentiate the effect of the choices, often using graphics and text descriptions. Categories are used to organize large sets 


of options. 


ys Review = View_-—‘| Format | 
. &P Picture Shape ~ 
zs BZ Picture Border 
> OD Picture Effects ~ 
In Line with Text 


[tj More Layout Options... 


Page Layout | References Mailings Review 


Mark the point at which one page ends 
and the next page begins. 


Column 


Indicate that the text following the column 
break will begin in the next column. 


Text Wrapping 
Separate text around objects on web 
Pages, such as caption text from body text. 


Next Page 
Insert a section break and start the new 
section on the next page. 


Continuous 
Insert a section break and start the new 
section on the same page. 


Even Page 
Insert a section break and start the new 
section on the next even-numbered page. 


Odd Page 
Insert a section break and start the new 
section on the next odd-numbered page, 


In these examples, clicking a menu button displays a list of choices that show their effect. 


- Live previews. Whenever the user hovers over a formatting option, the program shows what the results would look like with 


that formatting using the actual content. 


a J Colors ~ 
[A] Fonts ~ 


[9] Effects + 
Themes 


4 


al 


Live previews show the results of applying a formatting option on hover. 


- Enhanced tooltips. These concisely explain their associated commands and give the shortcut keys. They may also include graphics 
and references to Help (although they largely eliminate the need for command-related Help). 
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- Watch Calcu 
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Formula Auditing 


_| Trace Dependents 


Show arrows that indicate what 
101 cells are affected by the value of 
the currently selected cell. 
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3 30 
4 40 
2 50 


@) Press Fi for more help. 


Enhanced tooltips concisely explain their associated commands. 
While ribbons might not be suitable for all programs, all programs can potentially benefit from rich commands. 
Ribbons always have an Application button and Quick Access Toolbar 


The Application button and Quick Access Toolbar provide commands that are useful in any context, thus reducing 
the need to change tabs. While these three components are logically independent, a ribbon must always have an 
Application button and Quick Access Toolbar. Given that commands can go in either the ribbon or the Application 
button, you might be wondering where to place commands. The choice is not arbitrary. 


The Application button is used to present a menu of commands that involve doing something to or with a file, 
such as commands that traditionally go in the File menu to create, open, and save files, print, and send and 
publish documents. 


By contrast, the ribbon itself is for commands that affect the content of the window. Examples include 
commands used to read, modify, or use the content, or change the view. 


If you use a ribbon, you must also use an Application button even if your program doesn't involve documents or 
files. In such cases, use the Application menu to present commands for printing, program options, and exiting the 
program. While arguably the Application button isn't necessary for such programs, using it provides consistency 
across programs. Users don't have to hunt for save and undo commands or program options because they are 
always in the same place. 


The Quick Access Toolbar is required even if the ribbon only uses one tab. Again, while arguably such programs 
don't need a Quick Access Toolbar (because all the commands are already present on the single tab), having a 
customizable Quick Access Toolbar provides consistency across programs. For example, if users are in the habit of 
clicking the Print command, they should be able to do so in any program that uses a ribbon. 


Organization and discoverability 


By providing tabs and groups, ribbons allow you to organize your commands to aid discoverability. The challenge 
is that if the organization is done poorly, it can greatly harm discoverability instead. There should be a clear, 
obvious, and unique mapping between your commands and the descriptively labeled tabs and groups where they 
reside. 


Users will form a mental model of the ribbon after using it for a while. If that mental model doesn't make sense 
to users, is inefficient, or is incorrect, it will lead to confusion and frustration. Your most important goal in 
designing a ribbon is to facilitate finding commands quickly and confidently. If you do not accomplish this, your 
ribbon design will fail. Achieving this goal requires careful design, user testing, and iteration. Don't assume that it 
will be easy. 


Here are some common pitfalls to avoid: 


- Avoid generic tab and group names. A good tab or group name must accurately describe its specific contents, preferably using task- 


and goal-based language. Avoid generic tab and group names, as well as technology-based names. For example, almost any command 


in a document creating and authoring program could belong in tabs labeled Edit, Format, Tools, Options, Advanced, and M ore. Rely 
on specific, descriptive labels, not memorization. 


Avoid overly specific tab and group names. While we want tab and group names to be specific, they shouldn't be so specific that 
users are surprised by their content. Users often look for things using the process of elimination, so prevent them from overlooking 
your tabs or groups because the name is misleading. 


It may seem like a convenience to find a command through multiple paths. But keep in mind that when users find what they are 
looking for, they stop looking. It is all too easy for users to assume that the first path they find is the only path—which is a 
serious problem if that path is inefficient or unexpected. Furthermore, having duplicate commands makes it harder for users to 
find other commands they are scanning for. 
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Avoid multiple paths to the same command—especially if the path is unexpected or the command requires many clicks to invoke. 
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Document.docx - Microsoft Word 


Page Layout | References Mailings Review View 
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Page Setup FI 
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convenience to find a command through mul the page. 
keep in mind that when users find what they 
they stop looking. It is all too easy for users t 
first path they find is the only path—which is 
if that path is inefficient. 
© Avoid arbitrary command placement. Suppos 
a ae 


Page: 1 of1 | Words:158 | YS | le Qi 


In this example, you can change paragraph borders through the Page Borders command, even though there is a 
more direct path on the Home tab. If users looking for paragraph borders were to stumble across this unexpected 
path, they might easily assume that it's the only path. 


inspect every tab to find them—then promptly forget where they are. 


Tabs 


The best first step is to review the standard ribbon tabs. If your program's commands map naturally into the 
standard tabs, base your tab organization on these standards. On the other hand, if you program's commands 
don't map naturally, don't try to force it. Determine a more natural structure, and be sure to perform a lot of user 
testing to make sure that you've got it right. 


For non-standard tabs, consider these issues: 


- Each tab name should describe its content. Choose meaningful names that are specific, but not too specific. Users should never 


be surprised by their content. 
- Each tab name should reflect its purpose. Consider the goal or task associated with the commands. 
- Each tab name should be clearly distinct from all the other tab names. 


The Home tab is an exception to these considerations. While you don't have to have a Home tab, most programs 
should. The Home tab is the first tab, and contains the most frequently used commands. If you have frequently 
used commands that don't fit into the other tabs, the Home tab is the right place for them. 


If you can't determine a meaningful, descriptive tab name, it is probably because the tab isn't well designed. If 
your ribbon organization just isn't working, reconsider your tab design. 


Groups 


Dividing commands into groups structures the commands into related sets. The group label explains the common 
purpose of its commands. 


There are a variety of factors to consider when determining groups and their presentation: 


« Standard grouping. While there are significant differences in commands across programs, there are standard groups that are 
common across many programs. Having these commands appear with the same names and similar locations greatly 


improves discoverability. 


Correct: Incorrect: 
GA Find ~ Q GA Find ~ 
as. Replace aly, Replace 
Zoom Zoom . | 
Lg Select ~ Il Lg Select ~ 
Editing | | | Editing 


In the incorrect example, commands from two standard groups were merged into one non-standard group. 
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bommand requires many clicks to invoke. " Add or change the border around 


Avoid arbitrary command placement. Suppose that you think you have a good tab and group design, but discover that 
several commands just don't fit in. Chances are, your tab and group design isn't as good as you think it is, and you need to continue 
to refine it. Don't solve this problem by putting those commands where they don't belong. If you do, users likely will have to 


Avoid marketing-based placement. Suppose that you have a new version of your program and your marketing team really wants 
to promote its new features. It might be tempting to put them on the Home tab, but doing so is a costly mistake if it harms 
overall discoverability. Consider future versions of your product and how much frustration a constantly changing organization will cause. 
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- Granularity. Some structure is good, but too much structure makes commands harder to find. If the group names are generic, you 
might not have enough granularity. If there are groups with only one or two commands each, you probably have too much 
(although having an in-ribbon gallery without any other commands within a group is acceptable). 


Correct: Incorrect: 


4A Find ~ Q O = 7s 


aly, Replace 
Zoom Find Replace Select 


le Select ~ 


Editi Zoom Find Editing 


In the incorrect example, having groups with one or two commands is a sign of too much structure. 


Names. Good group names explain the purpose of their commands. If your group names don't, reconsider the name or the grouping. 


Incorrect: 
I= Align ~ 
ane Replace 
Change 
Styles. ~ S Format Painter 
Format Ua 
Correct: 


by 4A Find ~ 3] “i ~ [B Align ~ 
aly. Replace aa ~ Tey Group 


Paste uick Change 
+ S Format Painter we - Styles 7 B Sh Rotate ~ 
Clipboard Sa fa Arrange 


In the incorrect example, the group name is too vague to be helpful. A better approach would be to reorganize 
these commands into more specific groups. 


Order. People read in a left-to-right order (in Western cultures), so you might think that groups on the far left are the most 
noticeable. However, the highlighted tab name and the window content tend to act as focal points, so groups in the center of the 
tab usually receive more attention than the left-most group. Place the most commonly used groups in the most prominent 
locations, and make sure there is a logical flow for the groups across the tab. 


Document.docx - Microsoft Word 


Insert Page Layout References Mailings Review View 


Calibri | | aaBbccdc| AaBbCcdDe AaBbC: — AA |) al 
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TNormal | No Spaci... Headingi — Change (Editing 
Styles i; 
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Order. People read ina left-to-right order (in Western cultures), so you might think that groups 
onthe far leftare the most noticeable. However the highlighted tab name and the window 
contenttend to act as focal points, so groupsin thE center of the tab usually receive the more 
attention than the left-most group. 


‘Page: 1of1 | Words:59 | <% English (United States) eas. —— 9—_) 


In this example, the Font and Paragraph groups are more noticeable than the Clipboard group, because they are 
what the eye sees first when moving up from the document. 
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Document.docx - Microsoft Word 
Insert Page Layout 
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Comments 


onthe far leftare the most noticeable. However, the highlighted tab name and the window 
contenttend to act as focal points, so groupsin the center of the tab usually receive the more 
attention than the left-most group. 


Page:1of1 | Words: 59 | <% — English (United States) _ 


In this example, the Tracking group receives the most attention, in part because the highlighted Review tab acts 
as a focal point. 


- Uniformity. It can be hard to recognize commands when the command presentation all looks the same. Using icons with 
different shapes and colors, groups with varying formats, and commands with different sizes makes it easier for users to 
recognize command groups. Commands should have uniform sizing only when the ribbon is scaled down to its smaller sizes. 
Correct: Incorrect: 


figtel FESS) =| @yPivotChart = 19] mx ss ie = 
== +=" []Blank Form = a ae = = 


Form Split Multiple Form Form Split Multiple Pivot Blank More Form 
Form = Items © More Forms ~ Design Form Items Chart Form Forms~ Design 
Forms Forms 


In the incorrect example, the commands look too similar to one another because they are all the same size. 
If you can't determine a meaningful, descriptive name, it is probably because the group isn't well designed. 
Previews 


You can use various types of previews to show what will result from a command. By using helpful previews, you 
can improve the efficiency of your program and reduce the need for the trial-and-error learning approach. Live 
previews also invite experimentation and encourage creativity. 


Here are some of the different types of previews that you can use: 


- Realistic static icons and graphics. Static images that give a realistic indication of a command's effect. These can be used in 
galleries, drop-down menus, and enhanced tooltips. 


Theme Fonts 
Cambria (Headings) 


Calibri (Body) 
Recently Used Fonts 


Op Arial 

Arial Black 
Segoe Ul 
Tahoma 


In this example, the Font drop-down list shows each font name using the font itself. 
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In this example, realistic thumbnails are used to show the different watermarks. 


Dynamic icons and graphics. Icons and graphics that are modified to reflect the current state. Such icons are especially useful 
for galleries, as well as split buttons that change their default effect to be the same as the last action. 


AaBbCcDc| AaBbCcDc AaBbC: AaBbCc Aab a5 


1 Normal |1NoSpaci.. Headingi Heading2 Title > 


In this example, Microsoft Word changes the Styles gallery to reflect the current styles. 


|? A-| 
In this example, Word changes the Text highlight color and Font color commands to indicate their current effect. 


Live previews. When users hover over a formatting option, live preview shows what the results would look like with that 
formatting. Live previews help users make selections more efficiently and confidently based on the user's actual context. 


|) Watermark ~ = | %, 


Standard Colors 
EE) BESS 


OC No Color 


More Colors... 


Fill Effects... 


In this example, the Page Color command performs a live preview by showing the effect of the color options on 
hover. 


Live previews are a powerful feature that can really improve your users’ productivity, but even simple static 
previews can be a big help. 


Scaling the ribbon 


Scaling a toolbar is simple: if a window is too narrow to display a toolbar, the toolbar displays what fits and makes 
everything else accessible through an overflow button. 
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(i) Touch and Pen Input - Microsoft Office OneNote 
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Show Buttons on Two Rows 


Add or Remove Buttons * 


a Work Notebook 


Toolbars scale using an overflow button. 


A goal of rich commands is to take full advantage of the available space, so scaling a ribbon requires more design 
work. There is no default ribbon size, so you should not design a ribbon with a particular width in mind. You have 
to design layouts with a wide range of widths and realize that any one of them could be the one most of your 
users will see. Scaling is a fundamental part of ribbon design, not the last step. 


Notes Slide 
Page Show | Master Master Master 
Presentation Views 


|| [55] Slide Sorter | EJ Slide Master 

‘S) Notes Page Handout Master | 
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Presentation Views 


There is no default ribbon size. The smallest size is a single pop-up group icon. 


When designing a tab, specify the different layouts for each group (up to three) as well as the combinations that 
can be used together. The ribbon will show the largest valid combination that fits the current window size. 


If you do only seven things... 

1. Choose a command solution that is suitable for your program type. Using a ribbon should make a program feel 
simpler, more efficient, and easier to use—never the opposite. If using a ribbon isn't appropriate, consider using 
rich commands instead. 

2. Don't underestimate the challenge of creating an effective ribbon. Don't expect it to be a simple port of your 
existing menu bars and toolbars. And don't take for granted that using a ribbon automatically makes your 
program better. Being willing to commit the time and effort required for a command redesign is an important 
factor in deciding to use a ribbon. 

3. Make the commands discoverable. Choose a tab design that has a clear, obvious, unique mapping between 
your commands and the descriptively labeled tabs where they reside. Users should be able to determine quickly 
and confidently which tab has the command they are looking for, and rarely choose the wrong tab. 

4. Make the commands self-explanatory. Users should understand the effect of a command from its label, icon, 
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tooltip, and preview. They shouldn't have to experiment or read a Help topic to see how a command works. 
5. Make using the commands efficient: 
e Users should spend most of their time on the Home tab. 
e Users should rarely have to change tabs during common tasks. 
¢ When the window is maximized and users are on the correct tab, the most frequently 
used commands have the most visual emphasis and users can invoke them with a 
single click. Users can perform all other commands on the tab with at most four clicks. 
e Users shouldn't have to open dialog boxes to give commands and change attributes 
in common tasks. 
6. Help users choose commands and options confidently and minimize the need for trial-and-error. Use results- 
oriented commands whenever appropriate, often in the form of galleries and live previews. 
7. Make sure the ribbon scales well from the largest window sizes to the smallest. 


Guidelines 


General 


- Don't combine ribbons with menu bars and toolbars within a window. Ribbons must be used in place of menu bars and 


toolbars. However, a ribbon may be combined with palette windows and navigation elements, such as Back and Forward buttons and 
an Address bar. 


- Always combine a ribbon with an Application button and Quick Access Toolbar. 
- Select the left-most tab (usually Home) when a program is started. Don't make the last selected tab persist across program instances. 


- Show the ribbon in its normal state (not minimized) when a program is started for the first time. Users often leave default 


settings unchanged, so minimizing the ribbon at program start will likely cause all commands to be less efficient. Also, showing 
the ribbon initially minimized can be disorienting. 


- Make the ribbon state persist across program instances. For example, if a user minimizes the ribbon, it should be shown minimized 


Tabs 


the next time the program is run. But again, don't make the last selected tab persist in this way. 


- Whenever practical, use standard tabs. Using standard tabs greatly improves discoverability, especially across programs. See 


the standard ribbon tabs later in this article. 


- Label the first tab Home, if appropriate. The Home tab should contain the most frequently used commands. If you have frequently 


used commands that don't fit into the other tabs, the Home tab is the right place for them. 


- Add anew tab if: 


> Its commands are strongly related to specific tasks, and can be accurately described by the tab label. Adding the tab should help 
make its commands easy to find, not harder. 


> Its commands are mostly unrelated to tasks on other tabs. Adding the tab shouldn't require more tab switching during 
commonly performed tasks. 


> The tab has enough commands to justify having an extra place to look. Don't have tabs with only a few commands. Exception: 
= Consider adding a tab with a few commands if they are strongly related to a specific task and adding the tab greatly simplifies an 
overly complex Home tab. 


Generally, having fewer tabs is better, so remove tabs that don't help achieve these goals. 


- For the remaining tabs, place the most frequently used tabs first, while maintaining a logical order across the tabs. 


- Optimize the tab design so that users find commands quickly and confidently. All other considerations are secondary. 


- Don't provide a Help tab. Instead, provide assistance using program-wide Help and enhanced tooltips. 
- Use a maximum of seven core tabs. If there are more than seven, it becomes difficult to determine which tab has a command. 


While seven core tabs is acceptable for applications with many commands, most programs should aim for four or fewer tabs. 


For tab labeling guidelines, see Tab labels. 


Contextual tabs 


- Use a contextual tab to display a collection of commands that are relevant only when users select a particular object type. If there 


are only a few, frequently used commands, it may be more convenient and more stable to use a regular tab, and simply 
disable commands when they don't apply. 


r és 
=| 


Paste 
~ SF 


Clipboard ™ 


It's better to disable common commands like Cut and Copy than to use a contextual tab. 


- Include only the commands that are specific to a particular object type. Don't put commands only on a contextual tab if users 


might need them without first selecting an object. 


- Include the commands frequently used when working with a particular object type. Put frequently used general contextual 


commands on context menus and mini-toolbars to avoid tab switching during commonly performed tasks. Alternatively, 
consider putting general commands redundantly on a contextual tab if doing so avoids frequent tab switching. But don't overdo this 
—don't try to include every command that a user might need while working with the object. 
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In this example, the Borders command is included on the Design tab to avoid frequent tab switching during 
commonly performed tasks. 


Choose a contextual tab color that is different from the currently displayed contextual tabs. The same tab set can appear at a 
later time using a different color in order to achieve this, but try to use consistent color assignments across invocations 
whenever possible. 


Select a contextual tab automatically when: 
o The user inserts an object. In this case, select the first contextual tab in the set. 


o The user double-clicks an object. In this case, select the first contextual tab in the set. 


o The user selected a contextual tab, clicked off the object, then immediately clicked an object of the same type. In this case, return 
to the previously selected contextual tab. 


Doing so aids discoverability, improves the perception of stability, and reduces the need to switch tabs. However, leave users in 
control by not automatically selecting contextual tabs in other circumstances. 


When removing a contextual tab that is the active tab, make the Home tab or first tab the active tab. Doing so appears the 
most stable. 


Modal tabs 


- Use a modal tab to display a collection of commands that apply with a particular temporary mode, and none of the core tabs apply. 
If some of the core tabs apply, use a contextual tab instead, and disable the commands that don't apply. Because modal tabs are 
very limiting, they should be used only when there isn't a better alternative. 


Document.docx (Preview) - Microsoft Word 
| Print Preview 
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Print preview is a commonly used modal tab. 


- To close a modal tab, put the Close <mode>command as the last command on the tab. Use the Close icon to make the command 
easy to find. Give the mode in the command to prevent confusion about what is being closed. 


ia 
Close Print | 
Preview | 
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In this example, explicitly labeling the Close command with the mode removes any doubt about what is being 
closed. 


- To close a modal tab, also redefine the Close button on the window's title bar to close the mode instead of the program. User 
testing has shown that many users expect this behavior. 


Standard ribbon tabs 


Whenever practical, map your program's commands to these standard tabs, given in their standard order of 
appearance. 


Regular tabs 


- Home. Contains the most frequently used commands. If used, it is always the first tab. 
+ Insert. Contains commands to insert content and objects into a document. If used, it is always the second tab. 


Page layout. Contains commands that affect the page layout, including themes, page setup, page backgrounds, indenting, spacing, 
and positioning. (Note that the indenting and spacing groups can be on the Home tab instead, if there is enough room there.) If used, 
it is always the third tab. 


Review. Contains commands to add comments, track changes, and compare versions. 


View. Contains commands that affect the document view, including view mode, show/hide options, zooming, window 
management, and macros—the commands traditionally found in the Windows menu category. If used, it is the last regular tab 
unless the Developer tab is showing. 


Developer. Contains commands used only by developers. If used, it is hidden by default and the last regular tab when displayed. 


Most programs don't need the Review and Developer tabs. 


Contextual tabs 


« Format. Contains commands related to changing the format of the selected object type. Usually applies to part of an object. 
- Design. Contains commands, often in galleries, to apply styles to the selected object type. Usually applies to the entire object. 
- Layout. Contains commands to change the structure of a complicated object, such as a table or chart. 


If you have contextual commands related to format, design, and layout, but not enough for multiple tabs, just 
provide a Format tab. 


Groups 


- Whenever practical, use standard groups. Having common commands appear with the same names and similar locations 
greatly improves discoverability. See the standard ribbon groups later in this article. 


- Add anew group if: 
o Its commands are strongly related and can be accurately described by the group label. Adding the group should help make 
its commands easy to find, not harder. 


o Its commands have a weaker relationship to the commands in other groups. While all the commands on a tab should be 
strongly related, some command relationships are stronger than others. 


o The group has enough commands to justify having an extra place to look. Aim for 3-5 commands for most groups. Avoid having 
groups with only 1-2 commands, although having an in-ribbon gallery without any other commands within a group is acceptable. 


Having many groups with a single command suggests too much structure or lack of command cohesion. 
Don't over-organize by adding groups where they aren't needed. 


« Consider splitting a group if: 
o The group has commands that greatly benefit from having extra labels. For example, the commands might need clarification or 
their labels might have repetitive text. 
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In the better example, the group commands benefit from having extra labels, and a single, short group name 
works better than separate, longer ones. 
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o The group has many commands of different sizes and needs organization. 
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Window 


In this example, there are many commands of different sizes. 


o The group can be split into 2-3 roughly equal groups. 


o Usinga split group is more self-explanatory or less awkward than using separate groups. 
- Place the most commonly used groups in the most prominent locations, and make sure there is a logical order for the groups 


across the tab. 


- Optimize the group design so that users find commands quickly and confidently. All other considerations are secondary. 
- Don't scale groups containing a single button to a pop-up group icon. When scaling down, leave them as a single button. 
- Use a maximum of seven groups. If there are more than seven groups, it becomes more difficult to determine which group has 


a command. 
For group labeling guidelines, see Group labels. 


Standard ribbon groups 


Whenever practical, map your program's commands to these standard groups, which are given within their 


associated tabs in their standard order of appearance. 
Main tab 


+ Clipboard 
+ Font 

- Paragraph 
- Editing 


Insert tab 


- Tables 
- Illustrations 


Page layout tab 


+ Themes 
- Page setup 
- Arrange 


Review tab 


- Proofing 
+ Comments 


View tab 


- Document views 
- Show/hide 

- Zoom 

- Window 


Commands 


General 


+ Take advantage of the discoverability and scalability of ribbons by exposing all the commonly used commands. When 
appropriate, move frequently used commands from dialog boxes to the ribbon, especially those that are known to be hard to 
find. Ideally, users should be able to perform common tasks without using any dialog boxes. 
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- Don't use the scalability of ribbons to justify adding unnecessary complexity. Continue to exercise restraint—don't add commands to 


= Breaks ~ A) Watermark — In 


ce) Page Color ~ 


ii ue 


None bs 
Continuous 
Restart Each Page 
Restart Each Section 


Suppress for Current Paragraph 


Line Numbering Options... 


w 
= 


In this example, the Line numbers setting was previously buried in a property sheet. Putting the setting in the 
ribbon makes it much more discoverable. 


a ribbon just because you can. Keep the overall command experience simple. The following are ways to simplify the presentation: 
o Use context menus and mini-toolbars for in-place, contextual commands. 


Calibri(E~ 11 ~| AX a” Ayr “4 
= - + = So 
——— 2: A FEE 
& Cut 
G3 Copy 
F EN Paste 
Reconvert 
A Eont... 
= Paragraph... 
3= | Bullets . 
= Numbering > 
2 Hyperlink... 
Pel Look Up... 
Synonyms > 
Translate > 
Styles > 


In this example, a context menu and mini-toolbar show contextual commands in place. 


o Move (or keep) rarely used commands in dialog boxes. Use dialog box launchers to access these commands. You can still use 
dialog boxes with ribbons! J ust try to reduce the need for using them during common tasks. 


o Eliminate redundant, seldom used features. 


Presentation 


Present each command on only one tab. Avoid multiple paths to the same command—especially if the command requires 
many clicks to invoke. It may seem like a convenience to find a command through multiple paths. But keep in mind that when users 
find what they are looking for, they stop looking. It is all too easy for users to assume that the first path they find is the only path 
—which is a serious problem if that path is inefficient. 
o Exception: Contextual tabs may duplicate a few commands from the Home and Insert tabs if doing so prevents changing tabs 
for common contextual tasks. 


Within a group, put the commands in their logical order, while giving preference to the most frequently used commands. Overall, 
the commands should have a logical flow to make them easy to find, while still having the most frequently used commands appear 
first. Generally, commands with 32x32 pixel icons appear before commands with 16x16 pixel icons to aid scanning across groups. 


Avoid placing destructive commands next to frequently used commands. A command is considered destructive if its effect 
is widespread and either it cannot be easily undone or the effect isn't immediately noticeable. 


Use separators to indicate strongly related commands, such as a set of mutually exclusive options. 


Consider using toolbar-style groups for sets of strongly related, well-known commands that don't need labels. Doing so allows you 
to present many commands in a compact space without affecting discoverability and ease of learning. To be so well known, 
such commands are frequently used, instantly recognized, and therefore tend to be on the Home tab. 


Calibri aed | a |(2) s=|~ j=~ Spr) = oF |(24)( 


Bot Ube xy Aa A] | [tera 


In this example, toolbar-style groups are used for strongly related, well-known commands. 
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- Use 32x32 pixel icons for the most frequently used and important labeled commands. When scaling a group down, make 
these commands the last to convert to 16x16 pixel icons. 


- Avoid arbitrary command placement. Think carefully about your tab and group design to ensure that users aren't wasting 
time inspecting every tab to find the command they want. 


- Avoid marketing-based placement. M arketing objectives around the promotion of new features tend to change over time. 
Consider future versions of your product and how much frustration a constantly changing organization will cause. 


Interaction 


- Disable commands that don't apply to the current context, or that would directly result in an error. If helpful, use the 
enhanced tooltip to explain why the command is disabled. Don't hide such commands because doing so can cause the ribbon layout 


to change, making the ribbon presentation unstable. 

- Don't update command labels dynamically. Again, doing so might cause the tab layout to change, resulting in an unstable 
appearance. Instead, design commands so that they work with constant labels. 
Correct: Incorrect: 


wf ", } Previous ie } Previous 


Insert @ 
note + 22 Next 


Note 


Even though Insert note and Delete note are never enabled at the same time, displaying both commands is 
required for a stable ribbon. 


- Prefer direct controls. A command is direct if invoked with a single click (that is, without navigating through menus). However, with 
the exception of in-ribbon galleries, direct controls don't support Live preview, so the need for Live preview is also a factor. 


o Ifa command is among a related set of formatting options, and Live preview is important and practical, use Live preview to indicate 


the effect of the options—especially if users are likely to choose the wrong option otherwise. 
a If the command is used frequently, use an in-ribbon gallery for directness. 


a If the command is used infrequently, use a drop-down gallery. 


Correct: Better: 
ey\ch & 
| i | 


42. Rotate Left 90° 
Flip Vertical 


4k Flip Horizontal 


More Rotation Options... 


While the correct example is direct, the better example supports Live preview. 


o Otherwise, to obtain directness use ribbon controls in the following order of preference (all other considerations being equal): 


= Command buttons, check boxes, radio buttons, and in-place galleries. These are always direct. 

= Split buttons. Direct for the most common command, but indirect for the command variations. 

= Menu buttons. These are indirect, but present many commands that are easy to find. 

= Text boxes (with spin controls). Text input generally requires more effort than the other control types. 


If your ribbon consists mostly of menu buttons when displayed at full size, you might as well use a menu bar. 


Incorrect: 


ca > eid >» > MyMovie.wmv - Fabrikam Media 


Home Tools Visual Effects Sound | Share 


VW mew £ @ 


Soapbox YouTube Other | Computer Zune Other 


aa 


Share to Web Share to Device 


This ribbon has so many menu buttons that using a menu bar is a better choice. 


- Prefer immediate commands. A command is immediate if it takes effect immediately (that is, without dialog boxes to gather 
additional input). If a command might require input, consider using a split button, with the immediate command in the button 
portion, and the commands that require input in the submenu. 
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Preview and print the document 


L it Print 
~ : Select a printer, number of copies, and 
a Open other printing options before printing. 
Quick Print 
| | Save Send the document directly to the default 
i a printer without making changes. 


(_? 
y Print Preview 
7 Preview and make changes to pages before 
printing. 


SaveAs > 


\Y Prepare > 


In this example, the button immediately prints a single copy to the default printer, whereas the submenu version 
displays the Print Options dialog box. 


For command labeling guidelines, see Command labels. For guidelines on specific common controls, see the 
respective control guidelines. 


Galleries 


- Use a gallery if: 
o There is a well-defined, related set of choices from which users typically choose. There may be an unbounded number of 
variations, but the likely selections should be well contained. If the choices aren't strongly related, consider using separate galleries. 


o The choices are best expressed visually, such as formatting features. Using thumbnails makes it easier to browse, understand, 
and make choices. While the choices can be labeled, the selection is made visually and text labels shouldn't be required to 
understand the choices. 


o The choices show the result that is achieved immediately with a single click. There shouldn't be any follow-up dialog box to 
further clarify the user's intention, or a set of steps to achieve the indicated result. If users might want to adjust the choice, let them 
do so afterwards. 


Don't use a gallery to display many regular commands within a group. 


- Use an in-ribbon gallery if: 
o The choices are used frequently. The choices need the space and are worth the space potentially being taken from other commands. 


o For typical usage, there is no need to group or filter the presented choices. 
o The choices can be displayed effectively within the height of a ribbon (which is 48 pixels). 


- Choose the smallest standard gallery thumbnail size that does the job well. 
o Forin-ribbon galleries, use thumbnails of 16x16, 48x48, or 64x48 pixels. 


o For drop-down galleries, use thumbnails of 16x16, 32x32, 48x48, 64x48, 72x96, 96x72, 96x96, or 128x128 pixels. 
o All gallery items should have the same thumbnail size. 
+ For in-ribbon galleries: 


o Display a minimum of three choices; more if there is room. If there isn't sufficient space to display at least three choices in the 
typical window size, use a drop-down gallery instead. 


o Expand in-ribbon galleries to take advantage of available space. Use the additional space to show more items and make them easier 
to choose with a single click. 


- For drop-down galleries: 
o Display the gallery from either a combo box, drop-down list, split button, or menu button. 


o If the user clicks the main window to dismiss the drop-down gallery, just dismiss the gallery without selecting or modifying 
the contents of the main window. 


o Ifagallery has many choices and some choices are rarely used, simplify the default gallery by focusing on the commonly 
used choices. For the remaining commands, provide an appropriate command at the bottom of the gallery drop-down. 
a If the command shows a list of more variations, name it "M ore <singular feature name>options..." 
a If the command presents a dialog box that allows users to create their own custom options, name it "Custom <feature name>..." 
o Organize the choices into groups, if doing so makes browsing more efficient. 


o Ifagallery has many items, consider adding a filter to help users find choices more efficiently. To avoid confusion, initially display 
the gallery unfiltered. However, most galleries shouldn't require a filter because they shouldn't have so many choices, and using 
groups should be sufficient. 
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Scripts 
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Basic N-ary Operators 
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In this example, the gallery benefits from both groups and a filter. 


Previews 


- Use previews to show the effect of a command without users having to perform it first. By using helpful previews, you can 


improve the efficiency and ease of learning of your program, and reduce the need for trial-and-error. For the different types 
of command previews, see Previews in the Design Concepts section of this article. 


- For live previews, make sure that the preview can be applied and the current state restored within 500 milliseconds. Doing 


so requires the ability to apply formatting changes quickly and in a way that is interruptible. Users must be able to evaluate 
different options rapidly for live previews to have their full benefit. 


- Avoid using text in previews. Otherwise, the preview images will have to be localized. 


Icons 


- Provide icons for all ribbon controls except drop-down lists, check boxes, and radio buttons. Most commands will require both 


32x32 and 16x16 pixel icons (only 16x16 pixel icons are used by the Quick Access Toolbar). Galleries typically use 16x16, 48x48, or 
64x48 pixel icons. 


i bel. Ruler Document Map 


8 |= | Gridlines Thumbnails 
mo & Message Bar 
g 10 Show/Hide 

11 

12 |% 


Drop-down lists, check boxes, and radio buttons don't need icons, but all other ribbon controls do. 


- Provide unique icons. Don't use the same icon for different commands. 


- Make sure ribbon icons are clearly visible against the ribbon background color. Always evaluate ribbon icons in context and in 


high-contrast mode. 


- Choose icon designs that clearly communicate their effect, especially for the most frequently used commands. Well-designed 


ribbons have self-explanatory icons to help users find and understand commands efficiently. 


- Choose icons that are recognizable and distinguishable, especially for the most frequently used commands. Make sure the icons 


have distinctive shapes and colors. Doing so helps users find the commands quickly, even if they don't remember the icon symbol. 


Correct: Incorrect: 


Val Val 


In the incorrect example, the icons have similar coloring, making them hard to distinguish. 


- Consider creating pop-up group icons by placing the 16x16 pixel icon of the most prominent command in the group inside a 


32x32 pixel visual container. You don't have to create different icons for pop-up groups. 
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New Delete Previous Next 
Comment +* 


Comments | 


In this example, the pop-up group icon is created from the 16x16 pixel icon of the most prominent command. 


- If useful, change the icon to reflect the current state. Doing so is especially useful for split buttons whose default effect can change. 


Pian 


In this example, Microsoft Word changes the Text highlight color and Font color commands to indicate their 
current effect. 


- Make sure ribbon icons conform to the Aero-style icon guidelines. However, ribbon icons are shown straight on instead of being 
shown in perspective. 


Correct: Incorrect: 


Calculation Calculation {= 
Options ~ a Options ~ a 
Calculation __ Calculation 


In the incorrect example, the 32x32 pixel icon is shown in perspective. 
For more information and examples, see Icons. 
Enhanced tooltips 


- All ribbon commands should have enhanced tooltips to give the command name, shortcut key, description, and optional 
supplemental information. Avoid tooltips that simply restate the label. 


Incorrect: 


In this example, the tooltip simply restates the command label. 


- When practical, completely describe the command using a concise description. Link to Help only if further explanation is 
really necessary. 


Incorrect: 


is x Aa? - A Ale 


Font 


Strikethrough 


Draw a line through the middle of 


the selected text. 


@) Press Fi for more help. 


In this example, the command doesn't need Help. 


- When helpful, illustrate the effect of the command using a preview. 
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Wr eer Try F 


Hyperlink Bookmark Cross-reference Header Foo 


| + > 


Links © i Header 


J Insert Chart 


Insert a chart to illustrate and 
compare data. 


‘ Bar, Pie, Line, Area, and Surface are 
| | some of the available types. 


Press F1 for more help. 


3 


In this example, the tooltip image illustrates the effect of the command. 


For labeling guidelines, see Enhanced tooltip labels. 
Access keys and keytips 


- Note: Keytips are the mechanism used to display access keys for commands displayed directly on a ribbon. (Access keys for drop- 
down menu commands are indicated with an underlined character.) They differ from menu access keys in the following ways: 
o Two character access keys can be used. For example, FP can be used to access the Format painter command. 


o The access key assignments are shown using tips instead of underlines, so the character width and descenders aren't a factor in 
making assignments. 


- Assign access keys to all ribbon tabs and commands. The only possible exception is for commands coming from legacy add-ins. 


- For the Application button and Quick Access Toolbar: 
o Assign F to the Application button. This assignment is used because of the Application button's similarity to the traditional File menu. 


o For the Quick Access Toolbar and recently used file lists, assign access keys numerically. 


Home Insert | 


Keytips for Application button and Quick Access Toolbar. 


- For tabs: 
o Assign H to Home. 


o Starting with the most frequently used tabs, assign the first letter of the label. 
o Forany tabs that cannot be assigned to the first letter, choose a distinctive consonant or a vowel in the label. 


o For programs that used to support menu bars, strive to maintain access key compatibility to the best extent practical. Avoid 
assigning different meanings to access keys from legacy menu categories. For example, if the legacy menu bar version of a program 
had an Edit menu, strive to use an E access key to the equivalent tab. If there is no equivalent tab, don't assign an E access key to 
any tab to prevent confusion. 


Pai out References 
pn a | 
AB 2) Insert Endnote 

ABR Next Footnote ~ 


Tay 


(3 Manage Sources 
(A Style: APA ~ 


Insert Insert ow 
Footnote =| Show Notes Citation gj Bibliography ~ | 
Footnotes "| |___Gitations & Bibliography _ 
Keytips for tabs. 


- For ribbon commands, menus, and submenus: 
o Assign unique access key combinations within a tab. You can reuse access key combinations within different tabs. 


o Whenever possible, assign the standard access keys for commonly used commands. See the standard access key table. 


o For other commands: 
= For the most frequently used commands, choose letters at the beginning of the first or second word of the label, preferably the 
first letter. 


= For less frequently used commands, choose letters that are a distinctive consonant or a vowel in the label, such as "x" in "Exit." 
= For the least frequently used commands and dialog box launchers, use two letters as necessary. 

= For menus and submenus, use a single letter to reduce the number of keystrokes required for the complete command. 

= Don't use access keys starting with J, Y, or Zbecause they are used for contextual tabs, unassigned keytips, and popup groups. 
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Previous Footnote 
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Keytips for ribbons and menus. 


- For pop-up groups: 
o Use a two-letter access key that starts with Z. 


o Starting with the most frequently used groups, assign the second access key letter to the first letter of the label. 
o For any remaining groups, choose a distinctive consonant or a vowel in the label. 


| ae) 


Paragraph | Styles | Editing 


\ 


| 
eyes en) 


Keytips for pop-up groups. 


For shortcut key guidelines, see Keyboard. 


Application buttons 


- Use an Application button to present a menu of commands that involve doing something to or with a file. Examples 


include commands that traditionally go in the File menu to create, open, and save files, print, and send and publish documents. 


- Always provide an Application button when using a ribbon. If the program doesn't use files, use the Application button to access 
the program options and the Exit command. Application buttons always display a command menu—they are never just decorative. 


- Use the following standard Application menu commands when appropriate: 
New 
Open 
Save 
Save as... 
dist of file formats> 
<separator> 
Print... 
Print... 
Quick print 
Print preview 
Close 
<footer> 
Options 
Exit 


- Reserve commands that belong in the Application menu only for that menu. Don't place them redundantly in any of the tabs. 


- For each menu item, provide: 
o A label with the command name. 


o A 32x32 pixel icon. 
o A brief description. M ake sure the description can be displayed using at most two lines of text. 


- Use tooltips to document the shortcut keys. Unlike normal menus, Application menus don't document the shortcut keys using labels. 


Print (Ctrl+P} 


Prepare > 
In this example, tooltips are used to document the shortcut keys. 
Quick Access Toolbars 
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- Use the Quick Access Toolbar to provide access to frequently used commands. The commands can be from the Application button 
or the ribbon. 


- Always provide a Quick Access Toolbar when using a ribbon. Do so even if the ribbon has a single tab; this provides consistency 
across programs. 

- Prepopulate the Quick Access Toolbar with the frequently used commands in the Application menu. Provide Save and Undo if 
your program supports them, and Open and Print if supported and frequently used. 


- For the Customize Quick Access Toolbar menu, provide up to 12 of the most frequently used immediate commands. 
Immediate commands don't require additional input before they take effect, and are therefore well-suited for the Quick Access 
Toolbar. While these can be any immediate commands, prefer those commands that aren't on the Home tab, because users are 
more likely to choose those. 


- For the Customize Quick Access Toolbar menu, if there is a pair of related commands, provide both, regardless of frequency. 
Common pairs are Open/Close, Back/ Forward, and Undo/Redo. 


- For the Customize Quick Access Toolbar dialog, provide a way to add any command. Provide a Popular commands filter that 
displays the most frequently used commands, and select this filter by default. 


Dialog box launchers 
- Provide a group with a dialog box launcher if there is a related dialog box with infrequently used commands and settings. The 


dialog box should contain all the commands in the group, plus others—not a completely different set of commands or the 
same commands as the group. 


Calibri (Body) od bE [A a”|(35] i= ~ $2 - SE-|/ SE |S 
(BI U~ abe x, x Aa |Y-A-) |S BS S\le-||Q- 


j 


Font style: 


Underline color: 


Automatic 


Small caps 
[-] Double strikethrough {["] Outi All caps 
Superscript Hidden 
Subscript 


Preview 


Calibri —__ 


This is a TrueType font. This font will be used on both printer and screen. 


Lo} [_concet_] 


In this example, the Font dialog box displays a superset of the commands in the Font group. 


- Don't use a dialog box launcher to perform commands directly. A dialog box launcher must display a dialog box. 


- Don't use a dialog box launcher to access frequently used commands and settings. Compared to commands directly on the ribbon, 
the dialog box commands and settings are relatively undiscoverable. 


- Match the name of the dialog box with the name of the group. It doesn't have to be an exact match, but the names should be 
similar enough so that users aren't surprised by the results. 


Incorrect: 
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Show As: [jl Busy . v fps \ 

: ¥ HighImportance | 
ao i i ’ Time Categorize J 
4 Reminder: 15 minutes semi 9 § Low Importance 


When a reminder comes due 
[¥] Play this sound 


reminder.wav 


While a reminder sound is a reminder option, using the dialog box launcher to set the reminder sound is 
unexpected. 


- Display only the commands and settings that relate to the group. If the dialog box displays other things, users may conclude that 
this path to these other commands and settings is the only path. 


Bo) For aheey rt 709? Aa~ | ~ A-| 


a 
Italic 


Bold 
Bold Italic 


Underline color: 


[x] | Automatic [x] 


Small caps 


All caps 
Hidden 


This is the body theme font. The current document theme defines which font will be used. 


Lo} [cancel | 


In this example, the Font dialog box displays Character Spacing settings, which are unrelated to the associated tab. 
Labels 
Tabs 


+ Label all tabs. 
- Whenever practical, use the standard ribbon tabs. 


- Prefer concise, single word labels. While multi-word labels are acceptable, they take more space and are harder to localize. 


- Choose meaningful tab names that clearly and accurately describe their content. The names should be specific, but not overly 


SH Tab names should be predictable enough so that users aren't surprised by their content. Note that the Home tab is 
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generically named because it is used for the most frequently used commands. 


Incorrect: 
Basic 
Advanced 


These tab names don't describe their content in a meaningful way. They require users to determine if the 
command they are looking for is basic or advanced. 


- Choose tab names that reflect their purpose. Consider the goals or tasks associated with the tab. 
- Choose tab names that are clearly distinct from all the other tab names. 


- Use either nouns or verbs for tabs. Tab names don't require parallel phrasing, so choose the best label regardless of whether it's a 
noun or verb. 


- Don't use gerunds (names that end in "-ing"). Use the verb from which the gerund is derived instead. 


Correct: 
Draw 
Review 


Incorrect: 
Drawing 
Reviewing 


- Avoid tab names with the same initial letters, especially adjacent tabs. When the ribbon is scaled down, these tab names will have 
the same truncated text. 


Incorrect: 

Format 

Formulas 
- Prefer singular names. However, you can use a pural name if the singular name is awkward. 
- Use title-style capitalization. 


- Don't use ending punctuation. 
Contextual tabs and tab sets 


- End contextual tab set labels with "Tools". Doing so helps identify the purpose of contextual tabs. 
- Use title-style capitalization. 
- Don't use ending punctuation. 


Groups 


- Label all groups. 
o Exception: Omit the group label if the group has a single command and the group and command labels would be the same. 


Correct: Incorrect: 
=] Ee 
ES, ==2 

Macros Macros 
Macros 


Omit the group label if it is redundant with the group's only command. 


- Whenever practical, use the standard ribbon groups. 
- Prefer concise, single word labels. While multi-word labels are acceptable, they take more space and are harder to localize. 
- Choose meaningful group names that clearly and accurately describe their content. The names should be specific, not generic. 


Incorrect: 
Commands 
Tasks 
Tools 
Actions 
Objects 
Basic 
Advanced 
Settings 
Options 
Personalize 
More 
Other 


These group names don't describe their content in a meaningful way. Any command could be in these groups. 
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- Choose group names that reflect their purpose. Consider the goals or tasks associated with the commands in the group. 


- Avoid using gerunds (names that end in "-ing"). You can use gerunds, however, if using the verb from which the gerund is derived 
would be confusing. For example, use "Editing" and "Proofing" instead of "Edit" and "Proof." 


Don't use group names that are the same as tab names. Using the tab name that the group is on provides no information, and 
using the name of a different tab is confusing. 


Incorrect: 


Home Insert Page Layout References Mailings Review View 
‘Bb 4 Calibri vil + = Ay Will a4 ae & Web Layout 
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In this example, giving a group the name of a different tab is confusing. 


Prefer singular names. However, you can use a pural name if the singular name is awkward. 


Correct: 
Font 
Paragraph 
Illustrations 
Transitions 


- Use sentence-style capitalization. 


- Don't use ending punctuation. 
Commands 


- Label all commands. Having explicit text labels helps users find and understand commands. 
o Exception: A command can be unlabeled if its icon is extremely well known and space is at a premium. M ost likely, unlabeled 
commands will be on the Home tab. In this case, assign its Name property to an appropriate text label. This enables assistive 
technology products such as screen readers to provide users with alternative information about the graphic. 


Correct: 


Calibri 


These commands are extremely well known, so they don't need labels. 


Incorrect: 


ExeJ men weve 


fce3| id 20) Ge] apa > 


These commands require labels for rich commands. 


For command buttons, use a concise, self-explanatory label. Use a single word if possible; four words maximum. 


For drop-down lists, if the list always has a value, use the current value as the label. 


Calibri Sih = 


In this example, the currently selected font name acts as the label. 


If an editable drop-down list doesn't have a value, use a prompt. 


In this example, a prompt is used for the editable drop-down list's label. 


- Drop-down lists that aren't self-explanatory or are infrequently used need an explicit label. Put a colon at the end of the label. 
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i, Transition Sound: [NoSound] + 
| Transition Speed: Fast ” 


33] Apply To All 
In this example, an infrequently used drop-down list benefits from an explicit label. 


- For text boxes, use an explicit label. Put a colon at the end of the label. 


Advance Slide 
¥ On Mouse Click 
Automatically After: 00:00 = 


In this example, the text box control has an explicit label. 


- Use sentence-style capitalization. Doing so is more appropriate for the Windows tone. 


+ Start the label with an imperative verb. Exceptions: 
o Omit the verb if it's the same as the tab or group name. 


o Omit common verbs like Show, Create, Insert, or Format if the verb is easily inferred from the remaining label. 


- Don't use ending punctuation. 
- To conserve space, don't put ellipses on ribbon command labels. However, ellipses are used by commands in the Application 
button and drop-down menus. 


Enhanced tooltips 


- Use the title to give the command name and its shortcut key, if applicable. 


- For the title, don't use ending punctuation. 


- Start the description with a verb. Use the description to help users determine whether a specific feature is the one they are looking 
for. The description should be phrased to complete the sentence "This is the right feature to use if you want to...". 


Correct: 
Insert or draw a table into the document. 


Incorrect: 

Inserts or draws a table into the document. 
- Keep the description short. Get right to the point. Lengthy text discourages reading. 
- For split buttons, use a different tooltip to explain the split button menu. 


r Wil canibri (Body) * 
=) 
|B Z U ~ abe x, 


3 


Clipboard ™ 


"I 


\e | Calibri (Body) * 


Paste SZ B IU ~ abe x, 


¥ 


Clipboard ™ | 


Paste (Ctrl+V) Paste (Ctrl+V) 
Paste the contents of the Click here for more options such as 
Clipboard. pasting only the values or 


formatting. 


In this example, the split button menu has a different tooltip from the main button. 


- Use an optional supplemental description to explain how to use the control. This text can include information about the state of 
the control (including why it is disabled) if the control itself doesn't indicate state. Keep this text short, and use a Help topic for 
more detailed explanations. 


- For the description and supplemental description, use complete sentences with ending punctuation. 
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28 Qua « 


Hyperlink Action Text Header Wo 
| Boxy & Footer 


__ Links 


Insert SmartArt Graphic 


Insert a SmartArt graphic to visually 
communicate information. 


SmartArt graphics range from 
graphical lists and process 
diagrams to more complex 
graphics, such as Venn diagrams 
and organization charts, 


@ Press F1 for more help. 


An enhanced tooltip with a supplemental description. 
- Use sentence-style capitalization. 
Application buttons 


- Use "Quick" to indicate an immediate version of a command. 


Preview and print the document } 


Print 
t Select a printer, number of copies, and 
other printing options before printing. 


Print Preview 
. Preview and make changes to pages before 


printing. 


In this example, "Quick" indicates that the command is immediate. 


- Use an ellipsis to indicate that a command requires more information. 


- Use sentence-style capitalization. 
Documentation 


When referring to ribbons: 


Refer to the ribbon and its components as ribbon, tabs, groups, and controls. These terms are not capitalized. 


Refer to the round button as the Application button, and the menu it contains as the Application menu. 
Refer to the toolbar as the Quick Access Toolbar. 


Refer to tabs by their labels and the word tab. Use the exact label text, including its capitalization. 


Refer to commands by their labels. Refer to unlabeled commands by their tooltip names. Use the exact label text, including 
its capitalization, but don't include the ellipsis. Don't include the word button or command. 


To describe user interaction, use click for tabs and controls. Use enter for editable drop-down lists. Don't use choose, select, or pick. 


Refer to unavailable items as unavailable, not as dimmed, disabled, or grayed. In programming documentation, use disabled. 
When possible, format the labels using bold text. Otherwise, put the labels in quotation marks only if required to prevent confusion. 


Examples: 


- On the Home tab, click Paste special. 

- On the Home tab, in the Font box, enter "Segoe UI". 

- On the Review tab, click Show markup, and then click Reviewers. 
- On the Format tab, in Picture tools, click Compress pictures. 
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Ribbon Design Process 


Moving your features to a ribbon involves more than just sorting your buttons into tabs. 


Ribbons 


If you've decided the ribbon command user interface is appropriate for your program, the next step is to adopt 
an orderly and logical process for making the change. Shifting from menu bars and toolbars to the ribbon isa 
major overhaul of your program's interface. You must scrutinize every feature and decide how to best use the 
ribbon to convey the feature's meaning and value. 


When you start thinking in terms of tabs and groups, you'll find that gaps in functionality start to appear. You'll 
have to add commands to the ribbon that may have existed only in dialog boxes in previous versions. Find out 
what users are doing in the dialog boxes they most frequently access, and move those commands to the ribbon. 
Whenever possible, allow users to complete tasks without having to open any dialog boxes. 


Expect to spend a lot of time testing and changing command labels—all of them, not just the new ones. Ina 
normal product cycle, it's hard to justify changing the name of an old command. Moving commands to the ribbon 
gives you a rare opportunity to make this type of change. 


You'll also be tweaking legacy functionality to better fit the ribbon model. For example, one of your commands 
may have appeared dynamically in your menus or toolbars. You'll need to change this functionality when using 
the ribbon. Otherwise, the appearance of the command can cause drastic changes to the layout of your tabs and 
groups. Applying the ribbon guidelines, rather than hide a command, you should disable it. 


Surfacing commands from dialog boxes 


Once you have a rough draft of what you think your program's tabs and groups will contain, take a look at the 
organization and think about what's missing. 


For example, in Microsoft ®W ord, usage data indicates that the font dialog box is one of the most used in the 
program. Additional data shows that superscript, subscript, and strikethrough features are often manually added 
to the formatting toolbar. The Grow font and Shrink font buttons are frequently used in Microsoft PowerPoint ® 
where these commands appeared on the default toolbars. 


As a result, in the Font group of the Word Ribbon, eight new commands could be imported, in addition to the 
original commands from the default Formatting toolbar in Word. Doing so made it much less necessary to open 
the font dialog box. It also meant that a huge percentage of user customization from previous versions was no 
longer necessary. The work in this case turned out to be easy for developers because all of the features were 
already designed as buttons that could be added to a toolbar. 


In many cases, you'll find that a "toolbar-friendly" version of a feature doesn't already exist. For example, in 
Microsoft Excel 2003, to select all cells affected by conditional formatting, users had to open the Go to... dialog 
box, click the Special... button, then choose Conditional formats, and finally click OK to see the results. This 
dialog box was the only place the feature existed. There was no equivalent command that could be added to a 
menu or toolbar by users. To add a command like that to the ribbon in Office 2007, a toolbar-button-like version 
had to be built. 
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Often it is not immediately clear how to move a feature from a dialog box to the ribbon. In a typical dialog box, 
the user is forced to work within the dialog box until clicking OK. At that point, all the choices are committed and 
the user is returned to the program window. When the user interacts with a control on the ribbon, the changes 
are committed immediately. 


This means that all of your controls have to work independently, and they can never rely on additional controls. 
For example, you'll never choose a font face, and then a font size, and then click OK to apply both at once. There 
can never be an OK or Cancel button in the ribbon. This does not mean that controls can't affect one another. For 
example, in the Paragraph group, choosing Right justify causes Left justify to become unselected. 


Labeling commands 


Good labels help users understand commands tremendously, but most toolbar commands are unlabeled. There 
isn't much room on a 640 (or even 800) pixel wide screen, and the desire to fit as many commands on the toolbar 
as possible means that labels are usually sacrificed. Additionally, an especially wide translation of a label might 
unintentionally force some other command off the screen. 


One of the main benefits of the ribbon is that it provides enough room to label everything. As you lay out your 
tabs and groups, remember the goal that, at the most common resolution, most commands in the ribbon should 
be clearly labeled. You'll be tempted to drop labels as a way to cram a few more commands into a tab. You have 
to realize that most users won't memorize all your icons, and unlike with toolbars, there's no separate menu bar 
where users can search for labels. 


Only a few extremely well known commands can be unlabeled by default. They'll be commands like Bold and Cut, 
and they'll almost certainly be on your Home tab. 


Don't use an ellipsis (...) to indicate that a command requires more input. Directly on the ribbon, ellipses are used 
only to show truncation of text. (However, ellipses still have their traditional meaning in drop-down menus.) The 
ribbon strips ellipses automatically from the end of labels. When you're trying to fit a few more buttons on your 
tab, you'll be glad to have all that space back. 


For more guidelines, see Labels. 
Stabilizing your user interface 


One of the main benefits of the ribbon is that it provides a single, stable location for all the commands in the 
program. This stability gives users more of a sense of mastery over the program, whereas a dynamically changing 
UI causes a lot of confusion. Be sure to find these issues early in your planning. 


To maintain stability, disable commands that don't apply instead of hiding them. Hiding commands cause the 
layout of your groups to change, and that will likely cause the entire tab to change, sometimes dramatically. 


Never change labels dynamically. Again, changing a command's label on the fly causes major repercussions to the 
overall tab layout. You'll likely have to tweak existing functionality and labels to make a command ribbon-friendly. 


You may have to redesign existing commands. For example, suppose you have an Insert note command that 
appears only when non-notated text is selected, and a Delete note command that appears when only notated 
text is selected. In the ribbon, both commands must always be visible, with only one enabled at a time. 


Make users love the ribbon 
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Most users don't like change, especially if that change requires more effort or relearning. Users will get frustrated 
if tasks that were easy in your old program become difficult or hard to find with your new one. 


To make users love your ribbon: 


- Make sure commands are as easy to find as before. Given the consolidation and explicit labeling in ribbons, 
most commands should be easier to find than before. 


- Make sure tasks are as easy to perform as before. By using results-oriented commands and other types of 
preview in ribbons, many tasks should be easier to use than before. 


- Make an extra effort to ensure that the most frequently used keyboard shortcuts and access keys from your 
old program still work as expected. Definitely avoid assigning new meanings to access keys from legacy menu 
categories. For example, if the legacy menu bar version of a program had an Edit menu, strive to use an E 
access key to the equivalent tab. Power users are passionate about their efficient keyboard use and will 
especially appreciate this consistency. And they will also especially notice when it's missing. 


Don't assume that you've got it right. Rather, perform user testing throughout the design process to make sure 
users not only can perform their tasks, but do so significantly better than before. 


Putting it all together 


These are roughly the steps you'll go through as you move commands for features into the ribbon. In actuality, 
you'll go through all of these steps dozens of times during the many iterations you'll be doing over the course of 
the product cycle. 


1. Make a spreadsheet of all the commands in your program. Take the time to get this list right, as you'll be 
depending on it for a while. 
o This list includes every command from menu bars, toolbars, context menus, and any customization UI. 


o For each command, you'll want: 
= 1oolbar Control ID (TCID) information 


a Label 
a Usage data 


2. Filter out commands that belong on standardized program tabs: 
o Home 


o Insert 
o Page layout 
o Review 
o View 
o Developer 
o Standardized contextual tabs 
3. Filter out commands that belong on contextual tabs. 


4. Filter out commands that belong in standardized groups: 
o Clipboard 


o Font 
o Paragraph 
o Editing 


o Tables 
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o Illustrations 
o Themes 

o Page setup 
o Arrange 

o Proofing 

o Comments 
o Document views 
o Show/hide 
o Zoom 

o Window 

o Macros 


5. Organize the remaining commands into small groups of related functionality. 
o Group program-specific clusters of commands. 


o Talk with your usability researcher about doing "Sort-It" tests with users. 


6. Organize the groups into a total of 5-10 task-based tabs. 
o Begin prototyping tabs. Try out your prototyped UI. 


o Work with your user researcher to do command card sort tests with users. 

o What's missing? Are there features that need to be moved up from dialog boxes? 

o Where can you use galleries to better express the value and purpose of a feature or set of features? 
o Can users look at your tabs and know what they are for? Does each tab have an obvious purpose? 


o Think about the overall tab set. Can users read across the tab row and understand what your program 
does? 


o Think about the future of your program. Will the tabs you've picked make sense for the next several 
versions? Do they fit the overall direction of your program? 


7. Build any new features and add them to your tabs. 
o Until the new features are built, you'll be dealing with gaping holes in your tab designs. 


o And even worse, when something gets cut, you've got to deal with that hole becoming permanent. 
Think about this up-front. Features get cut all the time, and you'll have to deal with it fast. 


8. Test the organization of your features. 
o Do this throughout the development cycle, not just at major beta release dates. 


o Try using your prototypes yourself. 
o Have others use your prototypes and give you feedback. 


o To the best extent possible, design keyboard access keys and shortcuts to be compatible with 
previous program versions. 


o Try to get feedback about extended use, not just initial reactions. 


9. Iterate, iterate, iterate. 
o Make sure all roles (including developers, testers, and relevant managers) are planning for constant 
iteration on the organization of commands. 


o It's very easy to make changes since all the layout is simple XML. 


o But, documenting the current plan is hard. Be careful not to let your developers get ahead of your 
testers. 
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Program Command Patterns 
Ribbons 


The type of program is a good indicator of the appropriate command presentation: 


Simple User goals: Focus on basic document creation tasks. Directness and simplicity are important. 
document Examples: WordPad, Paint, Windows Journal. 
creation Recommended command presentation: Even though these programs are simple, there are usually too many commands to fit on 


Used to create a single toolbar. A ribbon is often a good choice, although a combination menu bar and a simple toolbar may also work well. The 
and view simple ability to provide results-oriented commands is often the deciding factor. 
documents. 


Targeted atall fF — 
users. i ) Untitled - Message (HTML) 


Options 


; t 
Bz B|2~A~||= = Address Check Follow Spelling 
= ———_— Tt = Book Names Up~* . 


‘Clipboa... ta Basic Text Names me Options ™ | Proofing 


To... 
7% 
= 


Subject: 


A ribbon is often the best choice for a simple document creation program. 


Intermediate User goals: Ability to perform a wide range of tasks with ease, although directness and simplicity are still important. 


document Examples: M icrosoft Office, Windows M ovie Maker. 
creation and Recommended command presentation: A ribbon is the ideal choice, especially if it provides results-oriented commands. 
authoring 


Used to create 
and view more 
complex 
documents. 
Targeted at 
intermediate 
users. 
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a ral - a 
Fs] 


4] Woraart ~ Q2 Symbol 
Picture Clip Photo Text 


Pee ES Box~ (4 Date & Time >gq Object 
Te 


A ribbon is the ideal choice for an intermediate document creation program. 


Advanced User goals: Efficiency. Getting large, complex projects done quickly. Discoverability and ease of learning are desirable but not 
document essential. 

creation and Examples: M icrosoft Visual Studio @ 

authoring Recommended command presentation: Efficient, configurable, scalable, and contextual UI. While a user-configurable ribbon 
Used to create = might work well, also consider using a menu bar with multiple toolbars that can be undocked to become palette windows. 
and view Vertical task panes may also be appropriate. 

advanced 

documents. 

pean  WindowsApplication1 - Microsoft Visual Studio 

oe File Edit View Project Build Debug Data Format Test Tools 


Window Community Help 
[el-~ i @| 4 2 B|9~™ ~-| D | Debug 


¢ Ctl 


| 


Form1 System.Windows.Forms.Form 


Sz)2) [a] ¥ |S 


Font Microsoft Sans Serif, 8.25 « 
ForeColor BB ControiText G 
FormBorderStyle Sizable 
RightToLeft No 
RightToLeftLayout False 
Text Form1 


Font 
2 Error List The font used to display text in the control. 


A menu bar with undockable toolbars can be the best choice for an advanced document creation program. 
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Document User goals: Focus on the content. Search, browse, navigate, and perform a few simple commands. 

viewers or Examples: Windows®lInternet Explorer® Windows M edia®Player, Windows Photo Gallery. 

browsers Recommended command presentation: Given that users want to focus on the content, and the commands are generally simple 
Used to find and and few in number, a combination of inline commands, a menu bar (possibly hidden by default), and a simple toolbar is often the 
read, view, or best choice. However, a ribbon might be a better choice if the program can benefit from results-oriented commands or the 


play content documents have interactive objects. 

created 

elsewhere. 

Targeted at all : 

users. (Ey Garden - Windows Photo Gallery 
A combination of direct commands, a menu bar, and a simple toolbar is often the best choice for a document 
viewer. 

Utilities User goals: Ability to perform tasks quickly and easily. Some tasks may be unfamiliar. 


Used to perform Examples: Calculator, Notepad, gadgets, Windows Live™ M essenger, Windows Fax and Scan, Windows Snipping Tool. 

simple, specific | Recommended command presentation: For simple utilities, direct commands and settings (such as command buttons, radio 
tasks. Targeted buttons, check boxes, drop-down lists, and sliders) are the best choice. For more advanced utilities, use a combination of a menu 
at all users. bar and a simple toolbar. The commands are too simple and few in number to warrant a ribbon. 
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Configuration 
programs 
Used to 
configure 
hardware and 
software. 
Targeted at all 
users. 


Games 

Used to play 
games. Targeted 
at all users. 


 Snipping Tool 


Utilities may have a menu bar and simple toolbar. 


User goals: Ability to perform unfamiliar tasks quickly and easily. 
Examples: Control panel pages and property sheets. 
Recommended command presentation: Direct commands are the best choice. 


Ee 
@Gv- @& « Clock, Language, and Region v | + [Search st st—‘(‘éBOWS 


Control Panel Home 


4, Date and Time 
System and Maintenance Set the time and date = Change the time zone 
Add clocks for different time zones 


S ity 
SELL Add the Clock gadget to Windows Sidebar 


Network and Internet 


Hardware and Sound : Regional and Language Options 


Programs . @ Install or uninstall display languages 
Change display language 

Change the country or region 

Change the date, time, or number format 
Change keyboards or other input methods 


User Accounts 


Appearance and 
Personalization 


Clock, Language, and Region 
Ease of Access 


Additional Options 


Classic View 
Classic View 


Control panel pages should have simple, direct command presentation. 


User goals: To have fun and focus on the game, right away. 
Examples: Halo ® Solitaire, FreeCell, InkBall. 


Recommended command presentation: If the commands are very simple and frequently used, use direct commands. If there 


are several infrequently used commands, place them in a simple menu bar. 
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Most games should have simple, direct command presentation. 
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Text 
These articles provide guidelines for using text in your Windows@based applications: 


. User Interface Text. Text is everywhere in the UI. Here's how to bring order to the chaos. 


- Style and Tone. How your users respond to your UI often has less to do with what you say than how you say 
it. 


You can also find specific text guidelines in the Text or Labels sections for Controls and Windows. 
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User Interface Text 


Usage patterns 

Design concepts 

Guidelines 
General 


Text fonts, sizes, and colors 
Other text characteristics 


Punctuation 
Capitalization 
Dates and times 


Globalization and localization 


Title bar text 
Main instructions 


Supplemental instructions 


Control labels 


Supplemental explanations 
Commit button labels 


User interface text appears on UI surfaces. This text includes control labels and static text: 


- Control labels identify controls and are placed directly on or next to the controls. 


« Static text, which is so called because it is not part of an interactive control, provides users with detailed instructions or 
explanations so they can make informed decisions. 


Note: Guidelines related to style and tone, fonts, and common control labels are presented in separate articles. 


Usage patterns 


UI text has several usage patterns: 


Title bar text 
Use title bar text 
to identify a 
window or the 
source of a 
dialog box. 


Main 
instructions 

Use the 
prominent main 
instruction to 
explain concisely 
what to do in the 
window or page. 


Folder Options [23] } 


In this example, the title bar text identifies a window. 


The instruction should be a specific statement, imperative direction, or question. Good main instructions 
communicate the user's objective rather than focusing just on manipulating the UI. 


Do you want to get the latest online 
content when you search Help? 


In this example, the main instruction text directly engages the user with a question in terms of the user's own 
benefit or interest. 
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Supplemental = You can provide more detailed information, provide context, and define terminology. Supplemental instructions 
instructions elaborate on the main instruction without simply re-wording it. 

When necessary, 

use a 


supplemental Backup and Restore Center 


instruction to 

present 

additional You need to be an administrator to run 
information = backup 

helpful to 

understanding or Use Fast User Switching to switch to an account with 
using the administrator privileges, or log off and log on as an 
window or page. administrator. 


In this example, the supplemental instructions provide two possible courses of action to take in response to the 
information presented in the main instruction. 


Control labels . 
Labels directly ¥| Show this clock 
on or next to Select time zone: 
controls. : 

(GMT-08:00) Pacific Time (US & Canada) ~, 

Enter display name: 

Clock1 

In this example, control labels identify desktop clock settings that users can select or modify. 
Supplemental 
explanations @ On (recommended) 
An elaboration : 
of the control This setting blocks all outside sources from connecting to this 
labels (typically computer, except for those unblocked on the Exceptions tab. 
for command Block all incoming connections 
links, radio 
buttons, and Select this option when you connect to less secure networks. All 
check boxes) exceptions will be ignored and you will not be notified when 
‘ Windows Firewall blocks programs. 
>) Off 


Avoid using this setting. Turning off Windows Firewall will r nake this 
computer more vulnerable to hackers or malicious software =. 


In this example, the supplemental explanations clarify the choices. 


Design concepts 


Software developers often think of text as relegated to product documentation and technical support. "First we'll 
write the code, and then we'll hire someone to help us explain what we have developed." Yet in reality, 
important text is written earlier in the process, as the UI is conceived and coded. This text is, after all, seen more 
frequently and by more people than perhaps any other type of technical writing. 
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Comprehensible text is crucial to effective UI. Professional writers and editors should work with software 
developers on UI text as an integral part of the design process. Have them work on text early because text 
problems often reveal design problems. If your team has trouble explaining a design, quite often it is the design, 
not the explanation, that needs improving. 


A design model for UI text 


As you think about UI text and its placement on your UI surfaces, consider these facts: 


comprehend the UI text unless they perceive the need to. 


During focused, immersive reading, people read in a left-to-right, top-to-bottom order (in Western cultures). 


When using software, users aren't immersed in the UI itself but in their work. Consequently, users don't read UI text—they scan it. 
When scanning a window, users may appear to be reading text when in reality they are filtering it. They often don't truly 


Within a window, different UI elements receive different levels of attention. Users tend to read control labels first, especially 


those that appear relevant to completing the task at hand. By contrast, users tend to read static text only when they think they 


need to. 


For a general design model, don't assume that users carefully read the text in a left-to-right, top-to-bottom order. 


Rather, assume that users start by quickly scanning the whole window, then read UI text in roughly the following 
order: 


. Interactive controls in the center 

. The commit buttons 

. Interactive controls found elsewhere 
. Main instruction 

. Supplemental explanations 

. Window title 

. Other static text in main body 


moO nr AnD uw FW NY 


. Footnotes 
You should also assume that once users have decided what to do, they will immediately stop reading and do it. 
Eliminate redundancy 


Redundant text not only takes valuable screen space, but weakens the effectiveness of the important ideas or 
actions that you are trying to convey. It is also a waste of the reader's time, and all the more so in a context 
where scanning is the norm. Windows®strives to explain what users need to do once—well and concisely. 


Review each window and eliminate duplicate words and statements, both within and across controls. Don't avoid 
important text—be explicit wherever necessary—but don't be redundant and don't explain the obvious. 


Avoid over-communication 


Even if text isn't redundant, it can simply be too wordy in an effort to explain every detail. Too much text 
discourages reading—the eye tends to skip right over it—ironically resulting in less communication rather than 
more. In UI text, concisely communicate the essential information. If more information is necessary for some 
users or some scenarios, provide a link to more detailed Help content, or perhaps to a glossary entry for 
clarification of a term. 


Incorrect: 
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‘S) & Speech Recognition Voice Training 


Welcome To Speech Recognition Voice Training 


By listening to you read aloud to the computer, Speech Recognition learns how you speak. 


On the next page some training text will be displayed. When the training text appears, read it aloud in a 
natural and even tone. 


The system will display one line at a time. When you have finished reading a line, the system will, after a 
short pause, automatically present the next line. 


If the system doesn't understand what you read, it will skip to the next line. This is normal, and not a 
cause for concern. 


Click Next to begin training. 


Note: We recommend that you take the Speech Recognition tutorial first. In addition to improving the 
recognition of your voice, the tutorial also gives you an opportunity to learn the most important Speech 
Recognition commands. 


In this example, there is too much text to scan easily. Although not intended by the designer, there is so much text 
that users will most likely click Next without reading anything. 


To avoid text that discourages reading, craft your text to make every word count. What doesn't add subtracts, so 
use simple, concise text. 


Use the inverted pyramid 


Academic writing typically uses a "pyramid" structural style that lays down a foundation of facts, works with 
those facts, and builds up to a conclusion—forming a pyramid-like structure. By contrast, journalists use an 
"inverted pyramid" style that starts with the conclusion—the fundamental "takeaway" that readers must have. It 
then fills in progressively more detail that readers may be interested in—perhaps just to scan. The advantage of 
this style is that it gets right to the point, and allows readers to stop reading at any point they choose and still 
understand the essential information. 


You should apply the inverted pyramid structure to UI text. Get right to the point with the essential information, 
let users stop reading at any time they choose, and use a Help link to present the remainder of the pyramid. 
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Customer Experience Improvement Program 


“a Do you want to join the Windows Customer Experience 
=" Improvement Program? 


The program collects information about computer hardware and how you use Windows, 
without interrupting you. This helps Microsoft identify which Windows features to 
improve. No information collected is used to identify or contact you. 


Read more about the program online 


@ Join the Windows Customer Experience Improvement Program 


») Idon't want to join the program at this time 


In this example, the essential information is in the query of the main instruction text, additional helpful 
information is in the supplemental instructions, and details are available by clicking a Help link. 


If you do only five things... 

1. Work on text early because text problems often reveal design problems. 

2. Design your text for scanning. 

3. Eliminate redundant text. 

4, Use easy-to-understand text; don't over-communicate. 

5. When necessary, provide links to Help content for more detailed information. 


Guidelines 


General 


- Remove redundant text. Look for redundant text in window titles, main instructions, supplemental instructions, content areas, 
command links, and commit buttons. Generally, leave full text in main instructions and interactive controls, and remove any 
redundancy from the other places. 


Avoid large blocks of UI text. Ways of doing this include: 
o Chunking text into shorter sentences and paragraphs. 


o When necessary, providing Help links to useful, but not essential, information. 


Choose object names and labels that clearly communicate and differentiate what the object does. Users shouldn't have to 
figure out what the object really means or how it differs from other objects. 


Incorrect: 
=) Monitors 
By Default Monitor 
4X) Default Monitor 


Better: 
=) Network adapters 
~~ Fabrikam 57xx Gigabit Controller 
&Y Fabrikam Wireless 2200BG Network Connection 


In the incorrect example, the object names are not differentiated at all; the better example shows strong 
differentiation by product name. 
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- If you want to make sure that users read specific text related to an action, place it on an interactive control. 
Acceptable: 


Format Local Disk (F:) 


Formatting will erase all data on this disk. 
To format the disk, click OK. To quit, click Cancel. 


In this example, there's a chance that users won't read the text that explains what they're confirming. 


Better: 


Format Local Disk (F:) 


A Formatting will erase all data on this disk. 


In this example, you can be sure that at least users understand that they are about to format a disk. 
. Use one space between sentences. Not two. 
Text fonts, sizes, and colors 


- The following fonts and colors are defaults for Windows. 


Pattern Theme symbol | Font, Color 


CaptionFont 9 pt. black (#000000) Segoe UI 

Title bar text 
iit inetveahiowe MainInstruction /|12 pt. blue (#003399) Segoe UI 

. . Instruction 9 pt. black (#000000) Segoe UI 
Secondary instructions 
ee BodyText 9 pt. black (#000000) Segoe UI 
aa er ae ee BodyText P pt. black (#000000) Segoe UI, bold or italic 

: BodyText 9 pt. black (#000000) Segoe UI, in a box 

Editable text 
rer Disabled 9 pt. dark gray (#323232) Segoe UI 
Link HyperLinkText {9 pt. blue (#0066CC) Segoe UI 
Links (Hover) Hot 9 pt. light blue (#3399FF) Segoe UI 
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[oocumenttet text en pat — pi 


- Use blue text only for links and main instructions. 
- Use green text only for URLs in search results. 


For more information and examples, see Fonts and Color. 


Other text characteristics 
Bold 


- Use bold sparingly to draw attention to text users must read. For example, users scanning down a list of radio button options 
may appreciate seeing the labels in bold, to stand out from text that adds supplemental information about each option. Be aware 
that using too much bold lessens its impact. 


- With labeled data, use bold to emphasize whichever is more important for the data as a whole. 
o For mostly generic data (where the data has little meaning without its labels, as with numerals or dates), use bold labels 


and plain data so that users can more easily scan and understand the types of data. 
o For mostly self-explanatory data, use plain labels and bold data so that users can focus on the data itself. 


o Alternatively, you can use dark gray text to de-emphasize less important information instead of using bold to emphasize 
the more important information. 


a Organize y PM Views + &2 Preview v @® SlideShow s2 Print > 


Favorite Links Date taken Tags 


Ei Documents 
[E) Pictures 


BP Music 


More » 


Autumn Leaves — Desert Landscape 


Autumn Leaves Date taken: 29/7/2007 
JPEG Image Tags: Sample; Landscape 


In this example, instead of emphasizing the data using bold, the labels are de-emphasized by using dark gray. 
- Not all fonts support bold, so it should never be crucial to understanding the text. 


Italic 
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- Use to refer to text literally. Don't use quotation marks for this purpose. 


Correct: 
The terms document and file are often used interchangeably. 


- Use for prompts in text boxes and editable drop-down lists. 


== Map network drive 


In this example, the prompt in the Search box is formatted as italic text. 


- Use sparingly to emphasize specific words to aid in comprehension. 
- Not all fonts support italic, so it should never be crucial to understanding the text. 


Bold italic 
- Don't use in UI text. 
Underline 


- Don't use, except for links. 
- Don't use for emphasis. Use italic instead. 


Punctuation 
Periods 


- Don't place at the end of control labels, main instructions, or Help links. 
- Place at the end of supplemental instructions, supplemental explanations, or any other static text that forms a complete sentence. 


Question marks 
- Place at the end of all questions. Unlike periods, question marks are used for all types of text. 
Exclamation points 


- In business applications, avoid. 
o Exceptions: Exclamation points are sometimes used in the context of download completion ("Done!") and to call attention 
to Web content ("New!"). 


Commas 
- Ina list of three or more items, always put a comma after the next-to-last item in the list. 
Colons 


- Use colons at the end of external control labels. This is particularly important for accessibility because some assistive 
technologies look for colons to identify control labels. 


- Use acolon to introduce a list of items. 
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Ellipses 


- Ellipses mean incompleteness. Use ellipses in Ul text as follows: 
o Commands: Indicate that a command needs additional information. Don't use an ellipsis whenever an action displays 
another window—only when additional information is required. For more information, see Command Buttons. 


o Data: Indicate that text is truncated. 
o Labels: Indicate that a task is in progress (for example, "Searching..."). 


Tip: Truncated text in a window or page with unused space indicates poor layout or a default window size that is 
too small. Strive for layouts and default window sizes that eliminate or reduce the amount of truncated text. For 
more information, see Layout. 


- Don't make ellipses interactive. To show truncated text, let users resize the control to see more text or use a progressive 
disclosure control instead. 


Quotation marks and apostrophes 


- To refer to text literally, use italic formatting rather than quotation marks. 


- Put window titles and control labels in quotation marks only if required to prevent confusion and you can't format using bold 
instead. 


- For quotation marks, prefer double-quotation marks (" "); avoid single-quotation marks. 


Correct: 
Are you sure you want to delete "Sparky's cat folder"? 


Incorrect: 
Are you sure you want to delete ‘Sparky's cat folder’? 


Capitalization 
- Use title-style capitalization for titles, sentence-style capitalization for all other UI elements. Doing so is more appropriate for 


the Windows tone. 


o Exception: For legacy applications, you may use title-style capitalization for command buttons, menus, and column 
headings if necessary to avoid mixing capitalization styles. 


© 2010, Microsoft Corporation. All rights reserved. Page 307 of 882 


Title bar 


Tab label 
Group box label - Sentence caps; no ending punctuation 
Radio button label @ Sentence caps; phrases; no ending punctuation 
Supplemental © Sentence caps; phrases; no ending punctuation ; 
ease Use sentence caps and standard punctuation tor option 
ssi or check box explanatory material. 
Check box label Sentence caps and colon: 
Check box option Sentence caps; phrases; no ending punctuation 
Text box label Sentence caps and colon: 
Drop-down list label Sentence caps and colon: 
Drop-down list 
option 
List view label 
Column heading 
Column entry 


This generic example shows correct capitalization and punctuation for property sheets. 
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Title bar 


Text box label Sentence caps and colon: 


Balloon Sentence caps 
Balloons use sentence caps and ending punctuation. 


Command links > Command links use sentence caps 


> Command links use sentence caps 


Progressive . 
: (w) 
Pa cell v) Sentence caps 
Help link Help links use sentence caps 


Command button label 


This generic example shows correct capitalization and punctuation for dialogs. 


For feature and technology names, be conservative in capitalizing. Typically, only major components should be capitalized (using 
title-style capitalization). 


Correct: 
Analysis Services, cubes, dimensions 


Analysis Services is a major component of SQL Server, so title-style capitalization is appropriate; cubes and 
dimensions are common elements of database analysis software, so it is unnecessary to capitalize them. 


For feature and technology names, be consistent in capitalizing. If the name appears more than once on a UI screen, it should 
always appear the same way. Likewise, across all UI screens in the program, the name should be consistently presented. 


Don't capitalize the names of generic user interface elements, such as toolbar, menu, scroll bar, button, and icon. 
o Exceptions: Address bar, Links bar. 


Don't use all capital letters for keyboard keys. Instead, follow the capitalization used by standard keyboards, or lowercase if the 
key is not labeled on the keyboard. 


Correct: 
spacebar, Tab, Enter, Page Up, Ctrl+Alt+Del 


Incorrect: 
SPACEBAR, TAB, ENTER, PG UP, CTRL+ALT+DEL 


Don't use all capital letters for emphasis. Studies have shown that this is hard to read, and users tend to regard it as "screaming." 
For warnings, use a warning icon and a clearly-worded explanation of the situation. There is no need to add, for example, the 
term WARNING in all capital letters. 


For more information, see the "Text" or "Labels" section in the specific UI component guidelines. 


Dates and times 
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Don't hard-code the format of dates and times. Respect the user's choice of locale and customization options for the date and 
time formats. The user selects these in the Region and Language control panel item. 


Monday, July 06, 2009 06 July 2009 
1:00 12:00 1:00 2:00 1:00 12:00 1:00 2:00 


In these examples from M icrosoft Outlook® both formats for the long date are correct. They reflect different 
choices users have made in the Region and Language control panel item. 


Use the long date format for scenarios that benefit from having additional information. Use the short date format for contexts 
that don't have sufficient space for the long format. While users choose what information they would like to include in the long 
and short formats, designers choose which format to display in their programs based on the scenario and the context. 


The Book list 
® Jonathan 


Follow up. Start by Friday, July 31, 2009. Due by Friday, July 31, 2009. 
Sent Tue 7/28/2009 5:07 AM 


In this example, the long date format helps users organize tasks and deadlines. 


Globalization and localization 


Globalization means to create documents or products that are usable in any country, region, or culture. 
Localization means to adapt documents or products for use in a locale other than the country/region of origin. 
Consider globalization and localization when writing UI text. Your program may be translated into other 
languages and used in cultures very different from your own. 


For controls with variable contents (such as list views and tree views), choose a width appropriate for the longest valid data. 


Include space enough in the UI surface for an additional 30 percent (up to 200 percent for shorter text) for any text (but not 
numbers) that will be localized. Translation from one language to another often changes line length of text. 


Don't compose strings from substrings at run time. Instead, use complete sentences so that there is no ambiguity for the 
translator. 


Don't use a subordinate control, the values it contains, or its units label to create a sentence or phrase. Such a design is not 
localizable because sentence structure varies with language. 


Incorrect: 


(¥] Create a computer account in the domain 


Correct: 


(¥] Create a computer account in the following domain: 


In the incorrect example, the text box is placed inside the check box label. 


Don't make only part of a sentence a link, because when translated, that text might not remain together. Link text should 
therefore form a complete sentence by itself. 
o Exception: Glossary links can be inserted inline, as part of a sentence. 


For more information, see the Go Global Developer Center. 
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Title bar text 


- Choose the title bar text based on the type of window: 
o Top-level, document-centric program windows: Use a "document name — program name" format. Document names are 
displayed first to give a document-centric feel. 


o Top-level program windows that are not document-centric: Display the program name only. 


o Dialog boxes: Display the command, feature, or program from which the dialog box came. Don't use the title to explain 
the dialog box's purpose—that's the purpose of the main instructions. For more guidelines, see Dialog Boxes. 


o Wizards: Display the wizard name. Note that the word "wizard" should not be included in wizard names. For more 
guidelines, see Wizards. 


- For top-level program windows, if the title bar caption and icon are displayed prominently near the top of the window, you can 
hide the title bar caption and icon to avoid redundancy. However, you still have to set a suitable title internally for use by 
Windows. 


- For dialog boxes, don't include the words "dialog" or "progress" in the titles. These concepts are implied and leaving these 
words off makes the titles easier for users to scan. 


Main instructions 


- Use the main instruction to explain concisely what users should do in a given window or page. Good main instructions 
communicate the user's objective rather than focusing just on manipulating the UI. 


- Express the main instruction in the form of an imperative direction or specific question. 
Incorrect: 


qu Microsoft Windows 


Internet Explorer 


If you restart or close the program, you might lose information. 


Close 


In this example, the main instruction simply states the name of the program; it doesn't explicitly invite a course of 
action for the user to take. 


o Exceptions: Error messages, warning messages, and confirmations may use different sentence structures in their main 
instructions. 


- Use specific verbs whenever possible. Specific verbs (examples: connect, save, install) are more meaningful to users than generic 
ones (examples: configure, manage, set). 
o For control panel pages and wizard pages, if you can't use a specific verb, you may prefer to omit the verb completely. 


Acceptable: 
Enter your locale, region, and language 


Better: 
Locale, region, and language 


o For dialogs, such as error messages and warnings, don't omit the verb. 
- Don't feel obliged to use main instruction text if adding it would only be redundant or obvious from the context of the UI. 
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W¥ Save As 


GuU- a « Sample Pictures v | +4 | | Search 


Filename: Untitled 


Save as type: | JPEG (*jpg;".jpeg;”jpe:"jfif) 


¥ Browse Folders 


In this example, the context of the UI is already very clear; there is no need to add main instruction text. 


Be concise—use only a single, complete sentence. Pare the main instruction down to the essential information. If you must 
explain anything more, consider using a supplemental instruction. 


Use sentence-style capitalization. 


Don't include final periods if the instruction is a statement. If the instruction is a question, include a final question mark. 


For progress dialogs, use a gerund phrase briefly explaining the operation in progress, ending with an ellipsis. Example: "Printing 
your pictures..." 


Tip: You can evaluate a main instruction by imagining what you would say to a friend when explaining what to do with the 
window or page. If responding with the main instruction would be unnatural, unhelpful, or awkward, rework the instruction. 


For more information, see the "Main instruction" section in the specific Ul component guidelines. 


Supplemental instructions 


When necessary, use a supplemental instruction to present additional information helpful to understanding or using the 
window or page, such as: 
o Providing context to explain why the window is being displayed if it is program or system initiated. 


o Qualifying information that helps users decide how to act on the main instruction. 
o Defining important terminology. 


Don't use a supplemental instruction if one isn't necessary. Prefer to communicate everything with the main instruction if you 
can do so concisely. 


Don't repeat the main instruction with slightly different wording. Instead, omit the supplemental instruction if there is nothing 
more to add. 


Use complete sentences and sentence-style capitalization. 


Control labels 


- Label every control or group of controls. Exceptions: 
o Text boxes and drop-down lists can be labeled using prompts. 
o Progressive disclosure controls are generally unlabeled. 
o Subordinate controls use the label of their associated control. Spin controls are always subordinate controls. 
o Omit control labels that restate the main instruction. In this case, the main instruction takes the access key. 


Acceptable: 
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Enter your billing address 
Billing address: 


In this example, the text box label is just a restatement of the main instruction. 


Better: 
Enter your billing address 


In this example, the redundant label is removed, so the main instruction takes the access key. 


Label placement: 
o Balloons, check boxes, command buttons, group boxes, links, tabs, and tips are labeled directly by the control itself. 


o Drop-down lists, list boxes, list views, progress bars, sliders, text boxes, and tree views are labeled above, flush left, or to 
the left. 


o Progressive disclosure controls are usually unlabeled. Chevron buttons are labeled to the right. 
Assign a unique access key for each interactive control except for links. For more information, see Keyboard. 


Keep labels brief. Note, however, that adding a word or two to a label can help clarity, and sometimes eliminates the need for 
supplemental explanations. 


Prefer specific labels over generic ones. Ideally users shouldn't have to read anything else to understand the label. 


Incorrect: 


Lo 


Correct: 


In the correct example, a specific label is used for the commit button. 


For lists of labels, such as radio buttons, use parallel phrasing, and try to keep the length about the same for all labels. 


For lists of labels, focus the label text on the differences among the options. If all the options have the same introductory text, 
move that text to the group label. 


Incorrect: 
Search 


("| Searching non-indexed locations include system directories 


(| Searching non-indexed locations include compressed files (ZIP.CAB...) 


Correct: 
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When searching non-indexed locations 
[Include system directories 
| Include compressed files (ZIP.CAB...) 


The correct example moves the identical introductory phrasing to the label, so the two options are more cleanly 
differentiated. 


- In general, prefer positive phrasing. For example, use do instead of do not, and notify instead of do not notify. 
o Exception: The check box label, "Don't show this message again," is widely used. 


- Omit instructional verbs that apply to all controls of the given type. Rather, focus labels on what is unique about the controls. 
For example, it goes without saying that users need to type into a text box control or that users need to click a link. 


Incorrect: 
Type your name: 


Select your state: 


Click for more options 


Correct: 


Your name: 


State: 


More options 


In the incorrect examples, the control labels have instructional verbs that apply to all controls of their type. 


- In some cases, the following parenthetical annotations to control labels may be helpful: 
o If an option is optional, consider adding "(optional)" to the label. 


o Ifan option is strongly recommended, add "(recommended)" to the label. Doing so means the setting is optional, but 
should be set anyway. 


o Ifan option is intended only for advanced users, consider adding "(advanced)" to the label. 
- You may specify units (seconds, connections, and so on) in parenthesis after the label. 


Initial size (MB): 
Maximum size (MB): 
This example shows that the unit of measurement is megabytes (MB). 
For more information, see the "Text" or "Labels" section in the specific Ul component guidelines. 
Supplemental explanations 


- Use supplemental explanations when controls require more information than can be conveyed by their label. But don't use a 
supplemental explanation if one isn't necessary—prefer to communicate everything with the control label if you can do so 
concisely. Typically, supplemental explanations are used with command links, radio buttons, and check boxes. 
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- When necessary, use bold in the control labels to make the text easier to scan when there are supplemental explanations. 


\V) @ On (recommended) 


This setting blocks all outside sources from connecting to this 
computer, except for those unblocked on the Exceptions tab. 


Block all incoming connections 


Select this option when you connect to less secure networks. All 
exceptions will be ignored and you will not be notified when 
Windows Firewall blocks programs. 


(<] © off 


: Avoid using this setting. Turning off Windows Firewall will r nake this 
computer more vulnerable to hackers or malicious software:=. 


In this example, the radio button labels are bold to make them easier to scan. 


- Adding a supplemental explanation to one control in a group doesn't mean that you have to provide explanations for all the 
other controls in the group. Provide the relevant information in the label if you can and use explanations only when necessary. 
Don't have supplemental explanations that merely restate the label for consistency. 


(>) Standard user (Users Group) 


Standard account users can use most software and change 
system settings that do not affect other users. 


@ Administrator (Administrators Group) 


Administrators have complete access to the computer and 
can make any desired changes. To help make the computer 
more secure, administrators are asked to provide their 
password or confirmation before making changes that affect 
other users. 


(©) Other: Administrators 


In this example, two controls in the group include supplemental explanations, but the third does not. 


- If asupplemental explanation follows a command link, write the supplemental text in second person. 
o Example: Command link: Create wireless network settings and save to USB flash drive 
Supplemental explanation: This will create settings that you can transfer to the router with a USB flash drive. Do this only 
if you have a wireless router that supports USB flash drive configuration. 


- Use complete sentences and ending punctuation. 


Commit button labels 


The following table shows the most common commit button labels and their usage. 


Button Meaning When to use Access key 
label 
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OK In dialog boxes: apply 
the changes or commit 
to the task and close 


the window. 


In owner property 
windows: apply the 
pending changes 
(made since the 
window was opened 
or the last Apply) and 
close the window. 


In owned property 
windows: keep the 
changes, close the 
window, and apply the 
changes when the 
owner window's 
changes are applied. 


Yes/No Yes is the affirmative response 


to a yes or no question, 
whereas No is the negative 
response. 


Cancel - In dialog boxes: 
discard all changes or 
work in progress, 
revert to the previous 
state (leaving no 
noticeable side effect), 
and close the window. 


In property sheets: 
discard all pending 
changes (made since 
the window was 
opened or the last 
Apply) and close the 
window. 


In control panel items: 
discard all changes or 
work in progress, 
revert to the previous 
state, and return to 
the hub page from 


© 2010, Microsoft Corporation. All rights reserved. 


Use with windows that aren't task Enter 


specific, such as property sheets. 


For windows used to perform one 
specific task, use a specific label instead 
that starts with a verb (example: Print). 


For windows in which users can't make 
changes, use Close. 


Use Yes and No buttons only to respond |Y andN 
to yes or no questions. Never use OK 
and Cancel for yes or no questions. 


Prefer specific responses over Yes and 
No buttons. While there's nothing 
wrong with using Yes and No, specific 
responses can be understood more 
quickly, resulting in efficient decision 
making. 


However, consider using Yes and No 
responses if the phrasing of specific 
responses turns out to be long or 
awkward. 


Don't use Yes and No buttons if the 
meaning of the No response is unclear. 
If so, use specific responses instead. 


Yes and No must always be used as a 
pair. 


Use when all pending changes or actions |Esc 
can be discarded and any side effects 
can be undone. 


For changes that can't be discarded, use 
Close. For actions in progress that can 
be stopped, use Stop. If initially changes 
or actions can be discarded, you can use 
Cancel initially then change to Close or 
Stop once it can't be undone. 
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which the task was 
launched. If there is no 
such hub page, close 
the control panel item 
window instead. 


Close Close the window. Any 
changes or side effects are not 


discarded. 


Stop Stop a currently running task 
and close the window. Any 
work in progress or side 
effects are not discarded. 


In owner property sheets: 
apply the pending changes 
(made since the window was 
opened or the last Apply), but 
leave the window open. Doing 
so allows users to evaluate the 
changes before closing the 
property sheet. In owned 
property sheets: don't use. 


Apply 


Next In wizards and multi-step 
tasks: advance to the next 
step without committing to 
the task. 


Finish In wizards and multi-step 
tasks: close the window. If the 
task hasn't been performed 
yet, perform the task. If that 
task has already been 
performed, any changes or 


side effects are not discarded. 
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The effect of a Next button can always 


Use when changes or side effects can't 
be discarded. Use Close instead of 
Cancel for primary windows. 


Alt+F4, Ctrl-+F4 


Use for windows in which users can't 
make changes. 


o 


Use when work in progress and any side _|Esc 
effects can't or won't be discarded, 
typically with progress bars or 


animations. 


Use only in property sheets. 


Provide an Apply button only if the 
property sheet has settings (at least 
one) with effects that users can evaluate 
in a meaningful way. Typically, Apply 
buttons are used when settings make 
visible changes. Users should be able to 
apply a change, evaluate the change, 
and make further changes based on that 
evaluation. If not, remove the Apply 
button instead of disabling it. 


Use only in wizards and multi-step tasks 
to advance to the next step without 
commitment. 


be undone by clicking Back. 


Use only in wizards and multi-step tasks. |Enter 
However, the use of Finish is 
discouraged because there is usually a 
better, more specific commit button: 

o If clicking the button commits to 
the task (so the task hasn't 
already been performed), use a 
specific label that starts with a 
verb (examples: Print, Connect, 
Start) that is a response to the 
main instruction. 


If the task has already been 
performed within the wizard, 
use Close instead. 


° 


However, you can use Finish when: 
o The specific label is still generic, 
such as Save, Select, Choose, or 
Get. 


o The task involves changing a 
setting or collection of settings. 


ft 
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Done Not applicable. - Don't use. Done as a command is Not applicable. 
grammatically incorrect. 
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Style and Tone 


Design concepts 
Guidelines 
Use the Windows tone 
Use real-world language 
Be precise 
Be consistent 
Contractions 
Colloquialisms, idioms, and slang 
Person 
Voice 
Attitude toward the user 
Sentence structure and length 


Tone in writing is the attitude that the writer conveys to the reader. It's not necessarily what you say, but how 
you say it. Tone is intended to create a specific response or emotion in the reader; it creates a personality that 
can either engage or repel users. 


Note: Guidelines related to user interface text are presented in a separate article. 


Design concepts 
The Windows tone 


Use the Microsoft®Windows®tone to inspire confidence by communicating to users on a personal level by being 
accurate, encouraging, insightful, objective, and user focused. The Windows tone also strives to be light, 
inspiring, straightforward, and trustworthy. 


Don't use a distracting, condescending, or arrogant tone. Avoid the extremes of the "machine" voice (where the 
speaker is removed from the language) and the "sales rep" voice (where the writing tries to sell us something, to 
cajole us, to cheer us up, to gloss over everything as "simple.") 


Research from Microsoft shows that in software, there is often: 


- Overuse of computer terminology and jargon, which many users don't understand or misinterpret. 
- Inconsistent use of terminology. 
- Impenetrable, often unintentionally patronizing messages, which users struggle to decipher. 


These problems make users feel confused, unintelligent, disheartened, and ultimately disengaged from their 
experience with software. 


Renewed attention to message quality, including the tone of the text, implies that language itself is an important 
ingredient in overall customer satisfaction. Support users with different levels of technical knowledge, especially 
novice users, to take advantage of all the things your program can do. 


If you do only one thing... 
Make sure that your text is accurate, encouraging, insightful, objective, and user-focused. Be straightforward and 
trustworthy, and where appropriate use a light and inspiring tone. 


Guidelines 


Use the Windows tone 
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Tone in your program should be: 


- Accurate. Users should feel reassured that the information is technically accurate. If the information isn't accurate, the user's 
experience with that specific task is spoiled, and he loses faith in any other assistance he reads from that source. 


- Encouraging. Use language that conveys that the software empowers users to do things, rather than allows them to do things. 
For example, use "you can" rather than "Windows lets you" or "this feature allows you." (Exception: it's okay to use "allow" 
when referring to features—such as security features—that permit or deny an action.) 


- Insightful. Users should believe that you (and by extension your application) know when a certain task is complicated and that 
you will guide them through it. At the same time, treat users as intelligent people who happen to need help with a particular 
problem. 


- Objective. Sometimes users want a richer explanation; often though they just want to know what they need to move on. This 
requires objectivity—to recognize that the goal (productivity, curiosity, enjoyment) is the user's goal, not the writer's. It also 
requires that you shed any predisposed notions about the user. 


- User-focused. Write from the user's perspective and preferably from the perspective of what you can do for the user. Users 
should feel that they will find information that is relevant and accessible to them. 


You can further develop communication with your users by being: 


- Light. A light voice feels easy to deal with and quick to comprehend. It isn't difficult or burdensome, and it avoids straining to 
be profound or serious. 


- Inspiring. An inspiring voice motivates users, stimulating them to take action. A certain enthusiasm marks this kind of voice, 
giving it amore engaging personality than the machine-like tone users have often come to expect from their computers. 


- Straightforward. A straightforward voice is candid and open, free from pretense or deceit. 


- Trustworthy. A trustworthy voice is worthy of confidence, reliable, accurate, and honest. It only takes only a few inaccuracies 
to lose the user's trust, but it may take a long time to earn that trust back. 


By contrast, be sure to avoid the following tones, which are much more likely to receive a negative reaction: 


- Machine tone. Feels like having an impersonal, inflexible exchange with a computer or robot. 

- Corporate tone. Feels like having a monologue with an all-powerful, all-knowing, impersonal corporation. 
. Law enforcement tone. Feels like being interrogated with a barrage of intrusive questions. 

- Lawyerly tone. Feels like being asked to perform some legally significant act. 

- Sales rep tone. Feels like being asked to buy or try something, with any concerns being glossed over. 


- Superior, condescending, or angry tone. Feels like the software is belittling users, talking down to them, or upset with them. 
Typically, this tone is very technical, draws unnecessary attention to the user's mistakes, and feels rude. 


- Boastful tone. Feels like the software is bragging about its accomplishments or otherwise drawing too much attention to itself. 


- Flippant tone. Feels like users' goals and emotions aren't being taken seriously, or their use of the program is being take for 
granted. 


Use real-world language 


- Use everyday words when you can and avoid words you wouldn't say to someone else in person. This is especially effective if 
you are explaining a complex technical concept or action. Imagine yourself looking over the user's shoulder and explaining how 
to accomplish the task. 


Acceptable: 
Use this procedure to change your password. 


Better: 
Follow these steps to change your password. 


- Use short, plain words whenever possible. Shorter words are more conversational, Save space on screen, and are easier to 
scan. 
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Acceptable: 

In addition, this section shows you... 
Digital cameras employ tiny microchips... 
Digital cameras utilize tiny microchips... 


Better: 
This section also shows you... 
Digital cameras use tiny microchips... 


Don't invent words or apply new meanings to standard words. Assume that users are more familiar with a word's established 
meaning than with a special meaning given it by the technology industry. When an industry term is required, provide an in- 
context definition. Avoid jargon, but remember that some expressions specific to computer usage—hacker, burn a CD, and so 
on—are already part of everyday speech. 


Incorrect: 
You can use folders to bucketize your favorites. 


Correct: 
You can use folders to categorize your favorites. 


Don't use symbols as a substitute for simple words. 


Incorrect: 

users & computers 
users +computers 
domain / workgroup 
#of users 


Correct: 

users and computers 
domain or workgroup 
number of users 


Be precise 
- Choose words with a clear meaning. 


Acceptable: 
Since you created the table, you can make changes to it. 
Keep your firewall turned on, as turning it off could create a security risk. 


Better: 
Because you created the table, you can make changes to it. 
Keep your firewall turned on, because turning it off could create a security risk. 


Omit needless words—don't use two or three words when one will do. 


Verbose: 
Follow these steps in order to change your password: 


Better: 
To change your password: 


Avoid unnecessary adverbs. 


Incorrect: 
It isn't terribly hard to change your password. 
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Correct: 
It isn't hard to change your password. 


Choose single-word verbs over multi-word verbs. 


Acceptable: 
When you lock down your computer, ... 


Better: 
When you lock your computer, ... 


Don't convert verbs to nouns and nouns to verbs. 


Incorrect: 
To password-protect your computer... 
To establish connectivity... 


Correct: 
To protect your computer with a password... 
To connect... 


Be consistent 


- Consistent terminology promotes learning and a better understanding of technical concepts. Inconsistency forces users to 
figure out whether different words and actions mean the same thing. Examples: 

switch, toggle 

start, run, launch, boot, execute 

enable, activate, turn on 

burn, copy 

Consistent syntax helps set users' expectations. Once these expectations are set, users can more quickly parse text that uses 


consistent syntax. For example, if instructions are always written in the imperative form, users will learn to pay closer attention 
to imperative sentences. 


Contractions 


- Contractions lend a shorter, snappier, more conversational rhythm to writing. Use them as appropriate and in context. Don't 
use contractions with product names or other proper nouns. 


Colloquialisms, idioms, and slang 


- Consider using colloquialisms or slang only in special situations, such as product tours, setup screens, or content that won't be 
localized. Recent studies have shown that users enjoy the unexpected word or familiar phrase. Bear in mind that using 
colloquialisms and slang can be difficult and costly to translate effectively, so such language is best used judiciously. 


Examples: 

On the other hand, there are certain values in the registry that shouldn't be changed. 

With SDSL, the line is dedicated to your Internet use, so you won't experience rush-hour traffic jams on the 
Internet, as you might with cable service. 


Person 


- Address the user as you, directly or indirectly. 
- Use the second person (you, your) to tell users what to do. Often the second person is implied. 


Examples: 
Choose the pictures you want to print. 
Choose an account. (implied) 
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- Use the first person (I, me, my) to let users tell the program what to do. 


Example: 
Print the photos on my camera. 


- Use we judiciously. The first-person plural can suggest a daunting corporate presence. However, it can be preferable to using 


the name of your application. Use we recommend rather than it is recommended. 


- Avoid third-person references (the user) because they create a more formal, less personal tone. 


Voice 


- Use the active voice, which emphasizes the person or thing doing the action. It is more direct and personal than the passive 


voice, which can be confusing or sound formal. 


Acceptable: 
Icons can be arranged by name in alphabetical order. 
When a Personal Digital Assistant (PDA) or laptop is plugged in... 


Better: 
You can arrange icons in alphabetical order by the icon name. 
When you plug in any Personal Digital Assistant (PDA) or laptop... 


- Use the passive voice only to avoid a wordy or awkward construction; when the action rather than the doer is the focus of the 


sentence; when the subject is unknown; or in error messages, when the user is the subject and might feel blamed for the error 
if the active voice were used. 


Correct: 
The new icon should appear in the upper-left corner. 
Updates must be downloaded and installed before they can work. 


- Phrase statements in the positive form, and emphasize what users can accomplish, rather than what they can't. 


Attitude toward the user 


- Be polite, supportive, and encouraging. The user should never feel condescended to, blamed, or intimidated. 


Acceptable: 
Cannot delete New Text Document: Access is denied. 


Better: 
This file is protected and cannot be deleted without specific permission. 


- Strike the right balance: be warm toward the user without being too intimate or too business-like. Imagine that you are 


helping a friend use the product for the first time. This person is not your best friend or significant other, but instead, a 
neighbor or family friend. Users should feel comfortable and at home when using your program, but the language should not 
feel presumptuous or too familiar. 


. Limit please to situations that inconvenience the user in some way, such as: 


o The user is asked to do something inconvenient, such as waiting, repeating a task or updating a program. 


Correct: 
Please wait while Windows copies the files to your computer. 


o The user can't complete a task because of a missing feature, design flaw, or program bug. 


Correct: 
Unable to save using the specified format. Please select another format. 
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o The user has gone out of his or her way to be helpful, as by participating in a customer feedback program or filing a bug 
report. 


Correct: 
To improve the Fabrikam Backup experience, please participate in the Fabrikam customer feedback program. 


You should also use please whenever its absence would be considered curt. 
Sign in 


@ Please type your e-mail address in the 
format yourname@example.com. 


ba Windows Live ID: 


(exampleS55@hotmail.com) 


x] Please type your password. 
Password: 


Forgot your password? 


In this example, the inline error messages would be curt without please. 


- Use sorry only in error messages that result in serious problems for the user (for example, data loss, the user can't continue 
to use the computer, or the user must get help from a technical representative). Don't apologize if the issue occurred during 
the normal functioning of the program (for example, if the user needs to wait for a network connection to be found). 


Correct: 
We're sorry, but Fabrikam Backup detected an unrecoverable problem and was shut down. 


Sentence structure and length 


- Because users often scan text, make every word count. Simple, concise sentences (and paragraphs) not only save space on the 
screen but are the most effective means of conveying that an idea or action is important. Use your best judgment—make 
sentences tight, but not so tight that the tone seems abrupt and unfriendly. 


- Avoid repetition. Review each window and eliminate duplicate words and statements. Don't avoid important text—be explicit 
whenever necessary—but don't be redundant and don't explain things that go without saying. 


- Use sentence fragments if appropriate. Sentence fragments are short and punchy—an4d, as they typically take the 
interrogative form, they are a good way of directly engaging the user. 


Correct: 
Save changes to "My Photos"? 
Ever saved a file and then not remembered where you saved it? 


- Start sentences with conjunctions (and, but, or) if you need to. 


- Substitute lists and tables for complex sentences. Lists (whether numbered or bulleted) and tables are clearer and easier to 
scan. 


- Use parallel grammatical constructions. Parallelism requires that words and phrases that have the same function have the 
same form. Use parallel language whenever you express ideas of equal weight, and for UI elements that are parallel in function 
(such as headings, labels, lists, or page titles). 


Correct: 
Listen 
Watch 
Share 


Collect 
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These items are parallel because they are all single-word, imperative verbs. 


Incorrect: 
M usic 
Video 
Share 
Listen 


These items are not parallel because M usic and Video are nouns, but Share and Listen are verbs. 
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Messages 
These articles provide guidelines for the different types of messages to use in your Windows®based applications: 


- Errors 
- Warnings 
- Confirmations 


- Notifications 
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Error Messages 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Presentation 
User input errors 
Troubleshooting 
Icons 
Progressive disclosure 
Don't show this message again 
Default values 
Help 
Error codes 
Sound 
Text 
Documentation 


An error message alerts users of a problem that has already occurred. By contrast, a warning message alerts 
users of a condition that might cause a problem in the future. Error messages can be presented using modal 
dialog boxes, in-place messages, notifications, or balloons. 


File and Folder Rename 


; ) Can't rename “Pictures” because a file or 
~ folder with that name already exists 


Specify a different name. 


A typical modal error message. 


Effective error messages inform users that a problem occurred, explain why it happened, and provide a solution 
so users can fix the problem. Users should either perform an action or change their behavior as the result of an 
error message. 


Well-written, helpful error messages are crucial to a quality user experience. Poorly written error messages result 
in low product satisfaction, and are a leading cause of avoidable technical support costs. Unnecessary error 
messages break users’ flow. 


Note: Guidelines related to dialog boxes, warning messages, confirmations, standard icons, notifications, and 
layout are presented in separate articles. 


Is this the right user interface? 
To decide, consider these questions: 


- Is the user interface (UI) presenting a problem that has already occurred? If not, the message isn't an error. If the user being alerted 
of a condition that might cause a problem in the future, use a warning message. 


- Can the problem be prevented without causing confusion? If so, prevent the problem instead. For example, use controls that are 
constrained to valid values instead of using unconstrained controls that may require error messages. Also, disable controls when 


clicking would result in error, as long as it's obvious why the control is disabled. 
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Can the problem be corrected automatically? If so, handle the problem and suppress the error message. 


Are users likely to perform an action or change their behavior as the result of the message? If not, the condition doesn't justify 
interrupting the user so it's better to suppress the error. 


Is the problem relevant when users are actively using other programs? If so, consider showing the problem using a notification area 
icon. 


Is the problem not related to the current user activity, does it not require immediate user action, and can users freely ignore it? If 
so, use an action failure notification instead. 


Does the problem relate to the status of a background task within a primary window? If so, consider showing the problem using a 
status bar. 


Are the primary target users IT professionals? If so, consider using an alternative feedback mechanism, such as log file entries or e- 
mail alerts. IT professionals strongly prefer log files for non-critical information. 


Design concepts 
The characteristics of poor error messages 


It should be no surprise that there are many annoying, unhelpful, and poorly written error messages. And 
because error messages are often presented using modal dialogs, they interrupt the user's current activity and 
demand to be acknowledged before allowing the user to continue. 


Part of the problem is that there are so many ways to do it wrong. Consider these examples from the Error 
M essage Hall of Shame: 


Unnecessary error messages 
Incorrect: 
Dwwin.exe - DIl Initialization Failed 


The application failed to initialize because the window stationis 


being shut down. 


This example from Windows® XP might be the worst error message ever. It indicates that a program couldn't 
launch because Windows itself is in the process of shutting down. There is nothing the user can do about this or 
even wants to do about this (the user chose to shut Windows down, after all). And by displaying this error 
message, Windows prevents itself from shutting down! 


The problem: The error message itself is the problem. Aside from dismissing the error message, there is nothing 
for users to do. 

Leading cause: Reporting all error cases, regardless of users' goals or point of view. 

Recommended alternative: Don't report errors that users don't care about. 

"Success" error messages 


Incorrect: 
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Remove Fabrikam 


(x) Program removal failure 


You must restart Windows to completely remove the 
program. 


This error message resulted from the user choosing not to restart Windows immediately after program removal. 


The program removal was successful from the user's point of view. 


The problem: There's no error from the user's point of view. Aside from dismissing the error message, there is 
nothing for users to do. 

Leading cause: The task completed successfully from the user's point of view, but failed from the uninstall 
program's point of view. 

Recommended alternative: Don't report errors for conditions that users consider acceptable. 

Completely useless error messages 


Incorrect: 


Internet Explorer 


(x) Unknown error 


Users learn that there was an error, but have no idea what the error was or what to do about it. And no, it's not 
OK! 


The problem: The error message doesn't give a specific problem and there is nothing users can do about it. 
Leading cause: M ost likely, the program has poor error handling. 
Recommended alternative: Design good error handling into the program. 


Incomprehensible error messages 


Incorrect: 
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Backup Status and Configuration 


4) The backup did not complete successfully 


An error occurred. The following information might 
help you resolve the error: 


If an MM error is returned which is not defined in the 
standard FsRtl filter, it is converted to one of the 
following errors which is guaranteed to be in the filter. 
In this case information is lost, however, the filter 
correctly handles the exception. (OxCQQ000EA) 


Backup time: 11/29/2006 11:57 AM 
Backup location: Backup(F:) 


In this example, the problem statement is clear, but the supplemental explanation is utterly baffling. 


The problem: The problem statement or solution is incomprehensible. 

Leading cause: Explaining the problem from the code's point of view instead of the user's. 

Recommended alternative: Write error message text that your target users can easily understand. Provide 
solutions that users can actually perform. Design your program's error message experience—don't have 
programmers compose error messages on the spot. 


Error messages that overcommunicate 


Incorrect: 
Microsoft Outlook Synchronization 


) ActiveSync cannot log on to Microsoft Outlook. Make sure Microsoft Outlook is installed and 

' functioning correctly. You may need to restart your computer. You could have a conflict due to two 
folders on this computer are named C:\Program Files\Microsoft and C:\Program Files\Microsoft 
Office. If so, rename the C:\Program Files\Microsoft folder so that it does not contain the word 
"Microsoft". If this folder contains subfolders, you may need to reinstall programs in the renamed 
folder. For more information on renaming folders and installing programs, see Help for your 


operating system. 


[close _] 


In this example, the error message apparently attempts to explain every troubleshooting step. 


The problem: Too much information. 

Leading cause: Giving too many details or trying to explain a complicated troubleshooting process within an error 
message. 

Recommended alternative: Avoid unnecessary details. Also, avoid troubleshooters. If a troubleshooter is 
necessary, focus on the most likely solutions and explain the remainder by linking to the appropriate topic in Help. 


Unnecessarily harsh error messages 


Incorrect: 
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Fabrikam Backup 


é r Can't find the object 


Catastrophic failure. 


The program's inability to find an object hardly sounds catastrophic. And assuming it is catastrophic, why is OK 
the response? 


The problem: The program's tone is unnecessarily harsh or dramatic. 
Leading cause: The problem is due to a bug that appears catastrophic from the program's point of view. 
Recommended alternative: Choose language carefully based on the user's point of view. 


Error messages that blame users 
Incorrect: 


Fabrikam 


2) You have entered an illegal object name 
character 


Remove the illegal object name character. 


Lox) 


Why make users feel like a criminal? 


The problem: The error message is phrased in a way that accuses the user of making an error. 
Leading cause: Insensitive phrasing that focuses on the user's behavior instead of the problem. 


Recommended alternative: Focus on the problem, not the user action that led to the problem, using the passive 


voice as necessary. 
Silly error messages 
Incorrect: 


Fabrikam 


4) An error occurred while creating an error 
report 


Lox} 


In this example, the problem statement is quite ironic and no solutions are provided. 


The problem: Error message statements that are silly or non-sequitors. 
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Leading cause: Creating error messages without paying attention to their context. 
Recommended alternative: Have your error messages crafted and reviewed by a writer. Consider the context 
and the user's state of mind when reviewing the errors. 


Programmer error messages 


Incorrect: 


) The COM+ Event System caught an access violation at 
address 0x00213BC8 within method SaveCompleted of 
interface IPersistFile. The method attempted to access 


address 0x00000000. 


In this example, the error message indicates that there is a bug in the program. This error message has meaning 
only to the programmer. 


The problem: M essages intended to help the program's developers find bugs are left in the release version of the 
program. These error messages have no meaning or value to users. 

Leading cause: Programmers using normal UI to make messages to themselves. 

Recommended alternative: Developers must conditionally compile all such messages so that they are 
automatically removed from the release version of a product. Don't waste time trying to make errors like this 
comprehensible to users because their only audience is the programmers. 


Poorly presented error messages 
Incorrect: 


FATAL ERROR! 


Unexpected catastrophic failure! Please investigate, 
=== then kill process. (0x0beQdead) 


This example has many common presentation mistakes. 


The problem: Getting all the details wrong in the error message presentation. 
Leading cause: Not knowing and applying the error message guidelines. Not using writers and editors to create 
and review the error messages. 


The nature of error handling is such that many of these mistakes are very easy to make. It's disturbing to realize 
that most error messages could be nominees for the Hall of Shame. 


The characteristics of good error messages 
In contrast to the previous bad examples, good error messages have: 


- Aproblem. States that a problem occurred. 
- Acause. Explains why the problem occurred. 
- Asolution. Provides a solution so that users can fix the problem. 
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Additionally, good error messages are presented in a way that is: 


Relevant. The message presents a problem that users care about. 


Actionable. Users should either perform an action or change their behavior as the result of the message. 


User-centered. The message describes the problem in terms of target user actions or goals, not in terms of what the code is unhappy 
with. 


Brief. The message is as short as possible, but no shorter. 


Clear. The message uses plain language so that the target users can easily understand problem and solution. 


Specific. The message describes the problem using specific language, giving specific names, locations, and values of the objects 
involved. 


Courteous. Users shouldn't be blamed or made to feel stupid. 


Rare. Displayed infrequently. Frequently displayed error messages are a sign of bad design. 


By designing your error handling experience to have these characteristics, you can keep your program's error 
messages out of the Error Message Hall of Shame. 


Avoiding unnecessary error messages 


Often the best error message is no error message. M any errors can be avoided through better design, and there 
are often better alternatives to error messages. It's usually better to prevent an error than to report one. 


The most obvious error messages to avoid are those that aren't actionable. If users are likely to dismiss the 
message without doing or changing anything, omit the error message. 


Some error messages can be eliminated because they aren't problems from the user's point of view. For example, 
suppose the user tried to delete a file that is already in the process of being deleted. While this might be an 
unexpected case from the code's point of view, users don't consider this an error because their desired outcome 
is achieved. 


Incorrect: 


Windows Explorer 


(x) Can't delete Autumn Leaves 


The file is already in the process of being deleted. 


This error message should be eliminated because the action was successful from the user's point of view. 


For another example, suppose the user explicitly cancels a task. For the user's point of view, the following 
condition isn't an error. 


Incorrect: 
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Fabrikam Backup 


(x) Can't complete the current backup 


The backup cannot complete because it was 
cancelled. 


This error message should also be eliminated because the action was successful from the user's point of view. 


Sometimes error messages can be eliminated by focusing on users' goals instead of the technology. In doing so, 
reconsider what an error really is. Is the problem with the user's goals, or with your program's ability to satisfy 
them? If the user's action makes sense in the real world, it should make sense in software too. 


For example, suppose within an e-commerce program a user tries to find a product using search, but the literal 
search query has no matches and the desired product is out of stock. Technically, this is an error, but instead of 
giving an error message, the program could: 


- Continue to search for products that most closely match the query. 

- If the search has obvious mistakes, automatically recommend a corrected query. 

- Automatically handle common problems such as misspellings, alternative spellings, and mismatching pluralization and verb cases. 
- Indicate when the product will be in stock. 


As long as the user's request is reasonable, a well designed e-commerce program should return reasonable results 
—not errors. 


Another great way to avoid error messages is by preventing problems in the first place. You can prevent errors by: 


Using constrained controls. Use controls that are constrained to valid values. Controls like lists, sliders, check boxes, radio buttons, 
and date and time pickers are constrained to valid values, whereas text boxes are often not and may require error messages. However, 
you can constrain text boxes to accept only certain characters and accept a maximum number of characters. 


Using constrained interactions. For drag operations, allow users to drop only on valid targets. 


Using disabled controls and menu items. Disable controls and menu items when users can easily deduce why the control or menu 
item is disabled. 


Providing good default values. Users are less likely to make input errors if they can accept the default values. Even if users decide to 
change the value, the default value lets users know the expected input format. 


Making things just work. Users are less likely to make mistakes if the tasks are unnecessary or performed automatically for them. Or if 
users make small mistakes but their intention is clear, the problem is fixed automatically. For example, you can automatically correct 
minor formatting problems. 


Providing necessary error messages 


Sometimes you really do need to provide an error message. Users make mistakes, networks and devices stop 
working, objects can't be found or modified, tasks can't be completed, and programs have bugs. Ideally, these 
problems would happen less often—for example, we can design our software to prevent many types of user 
mistakes—but it isn't realistic to prevent all of these problems. And when one of these problems does happen, a 
helpful error message gets users back on their feet quickly. 


A common belief is that error messages are the worst user experience and should be avoided at all costs, but it is 
more accurate to say that user confusion is the worst experience and should be avoided at all costs. Sometimes 
that cost is a helpful error message. 


Consider disabled controls. M ost of the time, it is obvious why a control is disabled, so disabling the control is a 
great way to avoid an error message. However, what if the reason a control is disabled isn't obvious? The user 
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can't proceed and there is no feedback to determine the problem. Now the user is stuck and either has to deduce 
the problem or get technical support. In such cases, it's much better to leave the control enabled and give a 
helpful error message instead. 


Incorrect: 


Ww) 3 Windows Complete PC Backup 


Where do you want to save the backup? 


Windows Complete PC Backup creates a backup copy of your entire computer, including programs, 
system settings, and files. Your entire computer can be restored using the Windows Recovery 
Environment. 


@ On a hard disk 


cw New Volume (F:) bd 


On one or more DVDs 


Why is the Next button disabled here? Better to leave it enabled and avoid user confusion by giving a helpful error 
message. 


If you aren't sure whether you should give an error message, start by composing the error message that you 
might give. If users are likely either to perform an action or to change their behavior as a result, provide the error 
message. By contrast, if users are likely to dismiss the message without doing or changing anything, omit the 
error message. 


Designing for good error handling 


While crafting good error message text can be challenging, sometimes it is impossible without good error 
handling support from the program. Consider this error message: 


Incorrect: 


Internet Explorer 


Chances are, the problem really is unknown because the program's error handling support is lacking. 
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While it's possible that this is a very poorly written error message, it more likely reflects the lack of good error 
handling by the underlying code—there is no specific information known about the problem. 


In order to create specific, actionable, user-centered error messages, your program's error handling code must 
provide specific, high-level error information: 


- Each problem should have a unique error code assigned. 
- Ifa problem has several causes, the program should determine the specific cause whenever possible. 
- Ifthe problem has parameters, the parameters must be maintained. 


- Low-level problems must be handled at a sufficiently high level so that the error message can be presented from the user's point of 
view. 


Good error messages aren't just a UI problem, they are a software design problem. A good error message 
experience isn't something that can be tacked on later. 


Troubleshooting (and how to avoid it) 
Troubleshooting results when a problem with several different causes is reported with a single error message. 


Incorrect: 


Cause 1 


Troubleshoot cause 1 
——» Troubleshoot cause 2 
Troubleshoot cause 3 


Error message stating 
Cause 2 ———*) several causes 


Cause 3 


Correct: 


Specific error message 


——» Solution 1 
for cause 1 


Causel => 


Specific error message 


Cause2 ——> 
for cause 2 


—— Solution 2 


Specific error message 
for cause 3 


Cause 3 ———» ——» Solution 3 


Troubleshooting results when several problems are reported with a single error message. 


In the following example, an item couldn't be moved because it was already moved or deleted, or access was 
denied. If the program can easily determine the cause, why put the burden on the user to determine the specific 
cause? 


Incorrect: 
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(x) Can't move “Sent Items” 


The item was either already moved or deleted, or 
access was denied. 


(close _] 


Well, which is it? Now the user has to troubleshoot. 


The program can determine if access was denied, so this problem should be reported with a specific error 
message. 


Correct: 


(x) Can't move “Sent Items” 


= 


You don't have permission to access this item. 


[Close _] 


With a specific cause, no troubleshooting is required. 


Use messages with multiple causes only when the specific cause cannot be determined. In this example, it would 
be difficult for the program to determine if the item was moved or deleted, so a single error message with 
multiple causes might be used here. However, it's unlikely that users are going to care if, for example, they 
couldn't move a deleted file. For these causes, the error message isn't even necessary. 


Handling unknown errors 


In some cases, you genuinely won't know the problem, cause, or the solution. If it would be unwise to suppress 
the error, it is better to be up front about the lack of information than to present problems, causes, or solutions 
that might not be right. 


For example, if your program has an unhandled exception, the following error message is suitable: 


(x) An unknown error occurred 
4 


If the problem persists, restart Fabrikam. 
Check online Help for solutions 


(A) Hide details 


Error code: 12345 
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If you can't suppress an unknown error, it is better to be up front about the lack of information. 


On the other hand, do provide specific, actionable information if it is likely to be helpful most of the time. 


Office Communicator 


(6a) Can't log on because the server is 
~ temporarily unavailable 


Check your network connection and try again. 


This error message is suitable for an unknown error if network connectivity is usually the problem. 
Determine the appropriate message type 


Some issues can be presented as an error, warning, or information, depending on the emphasis and phrasing. For 
example, suppose a Web page cannot load an unsigned ActiveX control based on the current Windows Internet 
Explorer®configuration: 


- Error. "This page cannot load an unsigned ActiveX control." (Phrased as an existing problem.) 


« Warning. "This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned Activex 
controls." or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your 
computer." (Both phrased as conditions that may cause future problems.) 


- Information. "You have configured Windows Internet Explorer to block unsigned ActiveX controls." (Phrased as a statement of fact.) 


To determine the appropriate message type, focus on the most important aspect of the issue that users need 
to know or act upon. Typically, if an issue blocks the user from proceeding, you should present it as an error; if 
the user can proceed, present it as a warning. Craft the main instruction or other corresponding text based on 
that focus, then choose an icon (standard or otherwise) that matches the text. The main instruction text and 
icons should always match. 


Error message presentation 


Most error messages in Windows programs are presented using modal dialog boxes (as are most examples in this 
article), but there are other options: 


- In-place 

- Balloons 

- Notifications 

- Notification area icons 

- Status bars 

- Logfiles (for errors targeted at IT professionals) 


Putting error messages in modal dialog boxes has the benefit of demanding the user's immediate attention and 
acknowledgement. However, this is also their primary drawback if that attention isn't necessary. 
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Modal error message 


2) You must stop what you are doing and 
acknowledge me now 


Click Close to certify that you have read me carefully. 


Do you really need to interrupt users so that they can click the Close button? If not, consider alternatives to using 
a modal dialog box. 


Modal dialogs are a great choice when the user must acknowledge the problem immediately before continuing, 
but often a poor choice otherwise. Generally, you should prefer to use the lightest weight presentation that does 
the job well. 


Avoid overcommunicating 


Generally, users don't read, they scan. The more text there is, the harder the text is to scan, and the more likely 
users won't read the text at all. As a result, it is important to reduce the text down to its essentials, and use 
progressive disclosure and Help links when necessary to provide additional information. 


There are many extreme examples, but let's look at one more typical. The following example has most of the 
attributes of a good error message, but its text isn't concise and requires motivation to read. 


Incorrect: 
Windows Media Player 


r Windows Media Player cannot copy the 
" files because it cannot find a CD recorder 


Check the connection between your computer and 
the CD recorder. If the Windows operating system 
does not recognize the CD recorder, use the Add 
Hardware Wizard to install the appropriate driver file, 
then try copying again. 

More information 


This example is a good error message, but it overcommunicates. 
What is all this text really saying? Something like this: 


Correct: 


© 2010, Microsoft Corporation. All rights reserved. 


Page 339 of 882 


Windows Media Player 


(x) ACD recorder wasn't detected 


Connect a CD recorder and try copying the files again. 
More information 


This error message has essentially the same information, but is far more concise. 
By using Help to provide the details, this error message has an inverted pyramid style of presentation. 


For more guidelines and examples on overcommunicating, see User Interface Text. 


If you do only eight things 

1. Design your program for error handling. 

2. Don't give unnecessary error messages. 

3. Avoid user confusion by giving necessary error messages. 

4. Make sure the error message gives a problem, cause, and solution. 

5. Make sure the error message is relevant, actionable, brief, clear, specific, courteous, and rare. 

6. Design error messages from the user's point of view, not the program's point of view. 

7. Avoid involving the user in troubleshooting—use a different error message for each detectable cause. 
8. Use the lightest weight presentation method that does the job well. 


Usage patterns 


Error messages have several usage patterns: 


System problems M any system problems can be solved by the user: 


The operating 

a - Device problems can be solved by turning the device on, reconnecting the device, and inserting media. 
ardware ; 

device. network - Network problems can be solved by checking the physical network connect, and running Network 

or program has diagnose and repair. 

failed or is not in - Program problems can be solved by changing program options or restarting the program. 

the state 

required to 


forma task. 
ogee Sey 


(x) Can't find a camera 


Make sure the camera is turned on and connected to 
the computer. 


In this example, the program can't find a camera to perform a user task. 
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Network discovery is turned off so 
network computers and devices aren't 
visible 


In Control Panel, turn on network discovery in 
Network and Sharing Center. 


In this example, a feature required to perform a task needs to be turned on. 


File problems 
A file or folder Delete File or Folder 
required for a 

task initiated by 


fieuserwasTicl Can't delete “Picture” because it wasn't 


found, is already found 

in use, or doesn't 

have the The file or folder “F:\Documents\Picture” may have 
expected been renamed, moved, or deleted. 


format. 


In this example, the file or folder can't be deleted because it wasn't found. 


(x} Windows Media Player can't play this file 


Windows Media Player doesn't support this file 


format. 


© show deta 


In this example, the program doesn't support the given file format. 
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Security 
problems 

The user doesn't 
have permission ; . 
to access a You don't have permission to access 


resource, or “C:\Documents\My Pictures” 
sufficient 
privilege to 
perform a task 
initiated by the 
user. 


You don't have privilege to perform a 
system backup 


To perform this task, contact the administrator of this 
computer. 


In this example, the user doesn't have the privilege to perform a task. 


Task problems 
There isa 
specific problem 
ae by The Clipboard information can't be 
the user (other pasted into Paint 

than a system, 
file not found, Try pasting the information into another program. 
file format, or 
security 


problem). 


In this example, the Clipboard data can't be pasted into Paint. 
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Windows Installer 


(3 ry The MSN Messenger upgrade can't be 
~ installed 


Either the program being upgraded is missing or the 
upgrade doesn't match the version of the program. 
Verify that MSN Messenger is installed and that the 
upgrade matches the program version. 


In this example, the user can't install a software upgrade. 


User input 


problems : rosso] 
The user entered  Vi® 2570 seconds 


a value that is b 
incorrect or 

inconsistent with 
other user input. 


The time must be between 0 and 1000 seconds 


In this example, the user entered an incorrect time value. 
Sign in 


@ Please type your e-mail address in the 
format yourname@example.com. 


fat Windows Live ID: HEME ete arr 


(example555@hotmail.com) 


Password: eeeecee 


Forgot your password? 


In this example, user input is not in the correct format. 


Guidelines 
Presentation 


- Use task dialogs whenever appropriate to achieve a consistent look and layout. Task dialogs require Windows Vista®or later, so they 
aren't suitable for earlier versions of Windows. If you must use a message box, separate the main instruction from the supplemental 
instruction with two line breaks. 


User input errors 


- Whenever possible, prevent or reduce user input errors by: 
o Using controls that are constrained to valid values. 


o Disabling controls and menu items when clicking would result in error, as long as it's obvious why the control or menu item is 
disabled. 


o Providing good default values. 
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Incorrect: 


Speaker volume: 


In this example, an unconstrained text box is used for constrained input. Use a slider instead. 


- Use modeless error handling (in-place errors or balloons) for contextual user input problems. 


- Use balloons for non-critical, single-point user input problems detected while in a text box or immediately after a text box loses 
focus. Balloons don't require available screen space or the dynamic layout that is required to display in-place messages. Display only a 
single balloon at a time. Because the problem isn't critical, no error icon is necessary. Balloons go away when clicked, when the 
problem is resolved, or after a timeout. 


Incorrect character ig off from Windows 
The PIN must be a 4 digit number. 


In this example, a balloon indicates an input problem while still in the control. 


- Use in-place errors for delayed error detection, usually errors found by clicking a commit button. (Don't use in-place errors for 
settings that are immediately committed.) There can be multiple in-place errors at a time. Use normal text and a 16x16 pixel error 


icon, placing them directly next to the problem whenever possible. In-place errors don't go away unless the user commits and no other 
errors are found. 


Sign in 


x) Please type your e-mail address in the 
format yourname@example.com. 


za Windows Live ID: 


(example555@hotmail.com) 


x) Please type your password. 
Password: 


Forgot your password? 


In this example, an in-place error is used for an error found by clicking the commit button. 


- Use modal error handling (task dialogs or message boxes) for all other problems, including errors that involve multiple controls or are 
non-contextual or non-input errors found by clicking a commit button. 


- When auser input problem is reported, set input focus to the first control with the incorrect data. Scroll the control into view if 
necessary. If the control is a text box, select the entire contents. It should always be obvious what the error message is referring to. 


- Don't clear incorrect input. Instead, leave it so that the user can see and correct the problem without starting over. 
> Exception: Clear incorrect password and PIN text boxes because users can't correct masked input effectively. 


Troubleshooting 


- Avoid creating troubleshooting problems. Don't rely on a single error message to report a problem with several different detectable 
causes. 


- Use a different error message (typically a different supplemental instruction) for each detectable cause. For example, if a file cannot 
be opened for several reasons, provide a separate supplemental instruction for each reason. 


- Use a message with multiple causes only when the specific cause can't be determined. In this case, present the solutions in order of 
likelihood of fixing the problem. Doing so helps users solve the problem more efficiently. 
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Icons 


- Modal error message dialogs don't have title bar icons. Title bar icons are used as a visual distinction between primary windows and 
secondary windows. 


- Use an error icon. Exceptions: 
o If the error is a user input problem displayed using a modal dialog box or balloon, don't use an icon. Doing so is counter to the 
encouraging tone of Windows. However, in-place error messages should use a small error icon (16x16 pixel) to clearly identify 
them as error messages. 


Fabrikam Registration 


The postal code has an incorrect format 


The computer name can be at most 14 characters 
Domain: microsoft.com 
In these examples, user input problems don't need error icons. 


1-425-555-121 


[x] This phone number has an incorrect 
format forthe specified address. 


In this example, an in-place error message needs a small error icon to clearly identify it as an error message. 


o If the problem is for a feature that has an icon (and not a user input problem), you can use the feature icon with an error 
overlay. If you do this, also use the feature name as the error's subject. 


Windows Media Player 


Windows Media Player encountered a 
problem while playing this file 


Why can't I play this file? 


In this example, the feature icon has an error overlay, and the feature is the subject of the error. 


- Don't use warning icons for errors. This is often done to make the presentation feel less severe. Errors aren't warnings. 
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Incorrect: 


Fast User Switching 


y This computer isn't configured for fast 
~ user switching 


The computer must be part of a workgroup and have 
the fast user switching feature enabled. 


In this example, a warning icon is incorrectly used to make the error feel less severe. 


For more guidelines and examples, see Standard Icons. 


Progressive disclosure 


- Use a Show/ Hide details progressive disclosure button to hide advanced or detailed information in an error message. Doing so 
simplifies the error message for typical usage. Don't hide needed information, because users might not find it. 


2) ActiveSync can't log on to Outlook 


Make sure that Outlook is installed and functioning 
correctly. 


You may need to restart your computer. You could 
have a conflict due to two folders on this computer are 
named C:\Programs Files\Microsoft and C:\Program 
Files\Microsoft Office. If so, rename the C:\Program 


Files\Micosoft folder so that it does not contain the 
word “Microsoft. If this folder contains subfolders, you 
may need to reinstall programs in the renameed folder. 
For more information on renaming folders and 
installing programs, see Help for your operating 


system. 


(A) Hide details 


In this example, the progressive disclosure button helps users drill down to more detail if they want it, or simplify 
the UI if they don't. 


- Don't use Show/ Hide details unless there really is more detail. Don't just restate the existing information in a more verbose format. 
- Don't use Show/ Hide details to show Help information. Use Help links instead. 


For labeling guidelines, see Progressive Disclosure Controls. 
Don't show this message again 


- If an error message needs this option, reconsider the error and its frequency. If it has all the characteristics of a good error (relevant, 
actionable, and infrequent), it shouldn't make sense for users to suppress it. 
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For more guidelines, see Dialog Boxes. 


Default values 


Help 


Select the safest, least destructive, or most secure response to be the default. If safety isn't a factor, select the most likely or 
convenient command. 


Design error messages to avoid the need for Help. Ordinarily users shouldn't have to read external text to understand and solve the 
problem, unless the solution requires several steps. 


Make sure the Help content is relevant and helpful. It shouldn't be a verbose restatement of the error message—rather, it should 
contain useful information that is beyond the scope of the error message, such as ways to avoid the problem in the future. Don't 
provide a Help link just because you can. 


Use specific, concise, relevant Help links to access Help content. Don't use command buttons or progressive disclosure for this 
purpose. 


For error messages that you can't make specific and actionable, consider providing links to online Help content. By doing so, you can 
provide users with additional information that you can update after the program is released. 


For more guidelines, see Help. 


Error codes 


- For error messages that you can't make specific and actionable or they benefit from Help, consider also providing error codes. Users 
often use these error codes to search the Internet for additional information. 


Always provide a text description of the problem and solution. Don't depend just on the error code for this purpose. 


Incorrect: 


Fakrikam 


(x) Unable to open file 


Error code 2233. 


In this example, an error code is used as a substitute for a solution text. 


Assign a unique error code for each different cause. Doing so avoids troubleshooting. 


Choose error codes that are easily searchable on the Internet. If you use 32-bit codes, use a hexadecimal representation with a 
leading "Ox" and uppercase characters. 


Correct: 
1234 
0xC0001234 


Incorrect: 
-1 
-67113524 


- Use Show/ Hide details to display error codes. Phrase as Error code: <error code>. 
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7 The application failed to initialize 
"properly 


Click Close to exit the program. 
Error code: 1142 


(A) Hide details 


In this example, an error code is used to supplement an error message that can benefit from further information. 
Sound 
- Don't accompany error messages with a sound effect or beep. Doing so is jarring and unnecessary. 


o Exception: Play the Critical Stop sound effect if the problem is critical to the operation of the computer, and the user must take 
immediate action to prevent serious consequences. 


Text 
General 


- Remove redundant text. Look for it in titles, main instructions, supplemental instructions, command links, and commit buttons. 
Generally, leave full text in instructions and interactive controls, and remove any redundancy from the other places. 


. Use user-centered explanations. Describe the problem in terms of user actions or goals, not in terms of what the software is unhappy 
with. Use language that the target users understand and use. Avoid technical jargon. 


Incorrect: 


ry An outgoing call cannot be made because 
the application is dispatching an 
input-synchronous call 


Correct: 


Fabrikam 


Ss 
f 


(6%) Fabrikam can’t make a call now because 
A . . . . 
~ itis busy receiving a call 


[Close] 


In these examples, the correct version speaks the user's language whereas the incorrect version is overly technical. 
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- Don't use the following words: 
o Error, failure (use problem instead) 


o Failed to (use unable to instead) 

o Illegal, invalid, bad (use incorrect instead) 
o Abort, kill, terminate (use stop instead) 

o Catastrophic, fatal (use serious instead) 


These terms are unnecessary and contrary to the encouraging tone of Windows. When used correctly, the error 
icon sufficiently communicates that there is a problem. 


Incorrect: 


Fabrikam Backup 


(x} Catastrophic failure! 


Correct: 
Fabrikam Backup 


Fabrikam Backup has experienced a 
serious problem and must close 
immediately 


In the incorrect example, the terms "catastrophic" and "failure" are unnecessary. 


- Don't use phrasing that blames the user or implies user error. Avoid using you and your in the phrasing. While the active voice is 
generally preferred, use the passive voice when the user is the subject and might feel blamed for the error if the active voice were 
used. 


Incorrect: 


(x) You entered incorrect logon information 


Check your user name and domain, then type your 
password again. 


Correct: 
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(x) The user name or password is incorrect 


Check your user name and domain, then type your 
password again. 


The incorrect example blames the user by using the active voice. 


Be specific. Avoid vague wording, such as syntax error and illegal operation. Provide specific names, locations, and values of the 
objects involved. 


Incorrect: 

File not found. 

Disk is full. 

Value out of range. 
Character is invalid. 
Device not available. 


These problems would be much easier to solve with specific names, locations, and values. 


Don't give possibly unlikely problems, causes, or solutions in an attempt to be specific. Don't provide a problem, cause, or solution 
unless it is likely to be right. For example, it is better to say An unknown error occurred than something that is likely to be inaccurate. 


Avoid the word "please," except in situations in which the user is asked to do something inconvenient (such as waiting) or the 
software is to blame for the situation. 


Correct: 
Please wait while Windows copies the files to your computer. 


Use the word "sorry" only in error messages that result in serious problems for the user (for example, data loss or inability to use the 
computer). Don't apologize if the issue occurred during the normal functioning of the program (for example, if the user needs to wait 
for a network connection to be found). 


Correct: 
We're sorry, but Fabrikam Backup detected an unrecoverable problem and was shut down to protect files on 
your computer. 


Refer to products using their short names. Don't use full product names or trademark symbols. Don't include the company name 
unless users associate the company name with the product. Don't include program version numbers. 


Incorrect: 


Microsoft Office Outlook 


(x) Can't open this item 


Microsoft® Windows® Operating System shut down 
without properly closing your Microsoft® Office 
Outlook® data files. Microsoft® Office Outlook® 
must be restarted. 
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Correct: 


Outlook 


(x) Can't open this item 


Windows shut down without properly closing your 
Outlook data files. 
Restart Outlook to continue. 


In the incorrect example, full product names and trademark symbols are used. 


- Use double quotation marks around object names. Doing so makes the text easier to parse and avoids potentially embarrassing 


statements. 
o Exception: Fully qualified file paths, URLs, and domain names don't need to be in double quotation marks. 


Correct: 
Fabrikam 


(x) “My house” is unavailable 


In this example, the error message would be confusing if the object name weren't in quotation marks. 


- Avoid starting sentences with object names. Doing so is often difficult to parse. 


- Don't use exclamation marks or words with all capital letters. Exclamation marks and capital letters make it feel like you are shouting 
at the user. 


For more guidelines and examples, see Style and Tone. 


Titles 


. Use the title to identify the command or feature from which the error originated. Exceptions: 
o If an error is displayed by many different commands, consider using the program name instead. 


o If that title would be redundant or confusing with the main instruction, use the program name instead. 
- Don't use the title to explain or summarize the problem—that's the purpose of the main instruction. 


Incorrect: 
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Error Renaming File or Folder 


2) Can’t rename “New Folder” because a file 
or folder with that name already exists 


Specify a different name. 


In this example, the title is being incorrectly used to explain the problem. 


- Use title-style capitalization, without ending punctuation. 


Main instructions 


« Use the main instruction to describe the problem in clear, plain, specific language. 


- Be concise—use only a single, complete sentence. Pare the main instruction down to the essential information. You can leave the 
subject implicit if it is your program or the user. Include the reason for the problem if you can do so concisely. If you must explain 
anything more, use a supplemental instruction. 


Incorrect: 


Windows Installer 


‘ ry The upgrade patch cannot be installed by 
" the Windows Installer service because the 

program to be upgraded may be missing, 
or the upgrade patch may update a 
different version of the program. Verify 
that the program to be upgraded exists 
on your computer and that you have the 
correct upgrade patch. 


In this example, the entire error message is put in the main instruction, making it hard to read. 


- Be specific—if there are objects involved, give their names. 


- Avoid putting full file paths and URLs in the main instruction. Rather, use a short name (such as the file name) and put the full name 
(such as the file path) in the supplemental instruction. However, you can put a single full file path or URL in the main instruction if the 
error message doesn't otherwise need a supplemental instruction. 
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Delete File or Folder 


6% Can't delete “Fabrikam” because it wasn’t 
~ found 


The file or folder “C:\Microsoft\Fabrikam” may have 
been renamed, moved, or deleted. 


In this example, only the file name is in the main instruction. The full path is in the supplemental instruction. 


- Don't give the full file path and URL at all if it's obvious from the context. 


File and Folder Rename 


( y¥ ) Can‘t rename “New Folder” because a file 
~ Or folder with that name already exists 


Specify a different name. 


In this example, the user is renaming a file from Windows Explorer. In this case, the full file path isn't needed 
because it's obvious from the context. 


- Use present tense whenever possible. 
- Use sentence-style capitalization. 


- Don't include final periods if the instruction is a statement. If the instruction is a question, include a final question mark. 
Main instruction templates 
While there are no strict rules for phrasing, try using the following main instruction templates whenever possible: 


<optional subject name>can't <perform action> 


<optional subject name>can't <perform action>because <reason> 


<optional subject name>can't <perform action>to "<object name>" 


<optional subject name>can't <perform action>to "<object name>" because <reason> 


There is not enough <resource>to <perform action> 


<Subject name>doesn't have a <object name>required for <purpose> 


<Device or setting>is turned off so that <undesired results> 


<Device or setting>isn't <available | found | turned on| enabled> 


"<object name>" is currently unavailable 


The user name or password is incorrect 


You don't have permission to access "<object name>" 


You don't have privilege to <perform action> 
<program name>has experienced a serious problem and must close immediately 
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Of course, make changes as needed for the main instruction to be grammatically correct and comply with the 
main instruction guidelines. 


Supplemental instructions 


- Use the supplemental instruction to: 
o Give additional details about the problem. 


o Explain the cause of the problem. 
o List steps the user can take to fix the problem. 
o Provide measures to prevent the problem from reoccurring. 


- Whenever possible, propose a practical, helpful solution so users can fix the problem. However, make sure the proposed solution is 
likely to solve the problem. Don't waste users’ time by suggesting possible, but improbable, solutions. 


Incorrect: 


Fabrikam 


(x) Out of memory 


If problems persist, reinstall the application. 


In this example, while the problem and its recommended solution are possible, they are very unlikely. 


If the problem is an incorrect value that the user entered, use the supplemental instruction to explain the correct values. Users 
shouldn't have to determine this information from another source. 


Don't provide a solution if it can be trivially deduced from the problem statement. 


Wait: 2550 seconds 


The time must be between 0 and 1000 seconds 


In this example, no supplemental instruction is necessary; the solution can be trivially deduced from the problem 
statement. 


If the solution has multiple steps, present the steps in the order in which they should be completed. However, avoid multi-step 
solutions because users have difficulty remembering more than two or three simple steps. If more steps are required, refer to the 
appropriate Help topic. 


Keep supplemental instructions concise. Provide only what users need to know. Omit unnecessary details. Aim for a maximum of 
three sentences of moderate length. 


To avoid mistakes while users perform instructions, put the results before the action. 


Correct: 
To restart Windows, click OK. 


Incorrect: 
Click OK to restart Windows. 


In the incorrect example, users are more likely to click OK by accident. 
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- Don't recommend contacting an administrator unless doing so is among the most likely solutions to the problem. Reserve such 
solutions for problems that really can only be solved by an administrator. 


Incorrect: 


Office Communicator 


(6a) Can't log on because the server is 
~ temporarily unavailable 


If the problem persists, contact your system 
administrator. 


In this example, most likely the problem is with the user's network connection, so it's not worth contacting an 
administrator. 


- Don't recommend contacting technical support. The option to contact technical support to solve a problem is always available, and 
doesn't need to be promoted through error messages. Instead, focus on writing helpful error messages so that users can solve 
problems without contacting technical support. 


Incorrect: 
Fabrikam 
(x) Can't open this item 


If this problem reoccurs, contact technical support for 


further assistance. 


In this example, the error message incorrectly recommends contacting technical support. 
- Use complete sentences, sentence-style capitalization, and ending punctuation. 


Commit buttons 


. If the error message provides command buttons or command links that solve the problem, follow their respective guidelines in Dialog 
Boxes. 


- Ifthe program must terminate as a result of the error, provide an Exit program button. To avoid confusion, don't use Close for this 
purpose. 


- Otherwise, provide a Close button. Don't use OK for error messages, because this wording implies that problems are OK. 
o Exception: Use OK if your error reporting mechanism has fixed labels (as with the M essageBox API.) 


Documentation 
When referring to errors: 


- Refer to errors by their main instruction. If the main instruction is long or detailed, summarize it. 


- If necessary, you may refer to an error message dialog box as a message. Refer to as an error message only in programming and other 
technical documentation. 
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- When possible, format the text using bold. Otherwise, put the text in quotation marks only if required to prevent confusion. 


Example: If you receive a There is no CD disc in the drive message, insert a new CD disc in the drive and try again. 
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Warning Messages 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Presentation 
Icons 
Don't show this message again 
Progressive disclosure 
Default values 
Text 
Documentation 


A warning message is a modal dialog box, in-place message, notification, or balloon that alerts the user of a 
condition that might cause a problem in the future. 


Low Battery 


A Change your battery or switch to outlet power immediately 


Your computer has a low battery, so you should act immediately to keep 
from losing your work. 


A typical modal warning message. 
The fundamental characteristic of warnings is that they involve the risk of losing one or more of the following: 


- A valuable asset, such as important financial or other data. 

« System access or integrity. 

- Privacy or control over confidential information. 

- User's time (a significant amount, such as 30 seconds or more). 


By contrast, a confirmation is a modal dialog box that asks if the user wants to proceed with an action. Some 
types of warnings are presented as confirmations, and if so, the confirmation guidelines also apply. 


Note: Guidelines related to dialog boxes, confirmations, error messages, standard icons, notifications, and 
layout are presented in separate articles. 


Is this the right user interface? 
To decide, consider these questions: 


Is the user being alerted of a condition that might cause a problem in the future? If not, the message isn't a warning. 


Is the UI presenting an error or problem that has already occurred? If so, use an error message instead. 


Are users likely to perform an action or change their behavior as the result of the message? If not, the condition doesn't 
justify interrupting the user so it's better to suppress the warning. 


Is the condition the direct result of an action initiated by the user? If not, consider using a non-critical event notification. 


Is the condition a special condition in a control? If so, use a balloon instead. 


For confirmations, is the user about to perform a risky action? If so, a warning is appropriate if the action has significant 
consequences or cannot be easily undone. 


For other types of warnings, does the user need to act now or in the immediate future? Don't display warnings if users can continue 
to work productively without immediate problems. Postpone the warning until the condition is more immediate and relevant. 


Design concepts 


Avoid overwaming 
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We overwarn in Microsoft ®Windows®programs. The typical Windows program has warnings seemingly 
everywhere, warning about things that have little significance. In some programs, nearly every question is 
presented as a warning. Overwarning makes using a program feel like a hazardous activity, and it detracts from 
truly significant issues. 


Incorrect: 


Hazardous Activity 


A Warning! Hot water is hot! 


Lx) 


Overwarning makes your program feel hazardous and look like it was designed by lawyers. 


The mere potential for data loss or a future problem alone is insufficient to call for a warning. Additionally, any 
undesirable results should be unexpected or unintended, and not easily corrected. Otherwise, just about any user 
mistake could be construed to result in data loss or a potential problem of some kind and merit a warning. 


Characteristics of good warnings 
Good warnings: 
- Involve risk. Good warnings alert users of something significant. 
Incorrect: 


Windows Help and Support 


y% Are you sure you want to exit the Help 
=— and Support? 


Se es) 


So what? This confirmation assumes that users often exit programs by accident. 


Have immediate relevance. Not only do users have to care, they have to care now. Users typically aren't interested in problems 
they might have later as long as they can do their work now. 


Incorrect: 


Low Battery 


A Your battery will be critically low in three hours 


Just thought you might like to know. 


Cx) 


In this case, it's better just to warn the user in three hours. 


Lead to action. There is something users must do or be aware of as the result of the warning. Perhaps they must take an action now 
or sometime in the immediate future. Perhaps they will perform a task differently as a result. The consequence of ignoring the 
warning should be clear. Warnings without actions just make users feel paranoid. 


Incorrect: 
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A Windows Live Messenger is still running! 
Windows Live Messenger will continue to run so that you 
can receive alerts and instant messages when you are 
signed in. 


Click here to not show this reminder again. 


Why is this notification a warning? What are users supposed to do (beside worry)? 


Are not obvious. Don't display a warning to state the obvious consequence of an action. For example, assume users understand 
the consequences of not completing a task. 


Incorrect: 
Internet Connection Wizard 


A Are you sure you want to exit the wizard? 


The new Internet account has not been created yet. 


Se es) 


Canceling an incomplete wizard means the task doesn't get done...who knew? 


Occur infrequently. Constant warnings quickly become ineffective and annoying. Users often become more focused on getting rid of 
the warning than addressing the problem. 


Incorrect: 


Fabrikam Antivirus 


A For the tenth time today, your virus signatures are out 
= of date! 


What's your problem? 


Cx) 


Users are more likely to focus on getting rid of the warning than fixing the underlying problem. 
A message that doesn't have these characteristics might still be a good message, just not a good warning. 
Determine the appropriate message type 


Some issues can be presented as an error, warning, or information, depending on the emphasis and phrasing. For 
example, suppose a Web page cannot load an unsigned ActiveX control based on the current Windows Internet 
Explorer ®configuration: 


« Error. "This page cannot load an unsigned Activex control." (Phrased as an existing problem.) 


- Warning. "This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned 
ActiveX controls." or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm 
your computer." (Both phrased as conditions that may cause future problems.) 


- Information. "You have configured Windows Internet Explorer to block unsigned ActiveX controls." (Phrased as a statement of fact.) 


To determine the appropriate message type, focus on the most important aspect of the issue that users need 
to know or act upon. Typically, if an issue blocks the user from proceeding, you should present it as an error; if 
the user can proceed, present it as a warning. Craft the main instruction or other corresponding text based on 
that focus, then choose an icon (standard or otherwise) that matches the text. The main instruction text and 
icons should always match. 
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Be specific 
Warnings are more compelling when the following information is specific and clear: 


« The source of the warning. 

« The specific condition and potential problem. 
- What the user should do about it. 

« What happens if the user doesn't do anything. 


Incorrect: 


‘€) 25) Connect to a Network Projector 


Select a network projector 


PHAMM-VISTAP25 


Number of projectors found: 1 | Search | Seats 


A Using this unsecured network projector presents a significant security risk! 


In this example, what is the potential problem? What is the user supposed to do, aside from not using the 
projector over the network? Without more specific information, all the user can do is feel bad about proceeding. 


Correct: 


re) = Connect to a Network Projector 


Select a network projector 


PHAMM-VISTAP25 


Number of projectors found: 1 | Search Samael 


x Because this projector does not require a password, your presentation could be 
seen by unintended viewers. 


In this example, the problem and consequences are clear. 
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Sometimes there is a legitimate potential problem worthy of informing users about, but the solution and 
consequences aren't known for sure. Rather than give a vague warning, be specific by giving the most likely 
information or the most common example. 


Correct: 


A Windows cannot access \\Fabrikam 


Check the spelling of the name. Otherwise, there might be a problem with your network. To 
try to identify and resolve network problems, click Diagnose. 


(v) See details 


In this example, the warning is made specific by providing the most likely solution. 


However, in such cases, use wording that indicates that there are other possibilities. Otherwise, users might be 
misled. 


Incorrect: 


Correct: 


A The network cable might be unplugged. 


Lx) 


In the incorrect example, users will be confused if the cable is clearly plugged in. 


If you do only two things... 

1. Don't overwarn. Limit warnings to conditions that involve risk and are immediately relevant, actionable, not 
obvious, and infrequent. Otherwise, remove or rephrase the message. 

2. Provide specific, useful information. 


Usage patterns 


Warnings have several usage patterns: 
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Awareness 
Make user aware of a condition or Reenentt Ofhiee Ontieok 
potential problem, but user may not 
have to do anything now. 


There was a problem reading one or more of your reminders. Some reminders may not appear. 
= Network problems are preventing connection to the Microsoft Exchange Server computer. 


| Low battery za 
* You should change your battery or switch to 

outlet power immediately to keep from losing 
your work. 


A Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 


Press Caps Lock to turn it off before entering your password. 


» ATPM was not found. A TPM is required to turn on BitLocker. If your computer has a TPM, then 
contact the computer manufacturer for BitLocker-compatible BIOS. 


Examples of awareness warnings. 
Awareness warnings have the following presentation: 


- Main instruction: Describe the condition or potential problem. 
- Supplemental instruction: Explain the implication and why it is important. 
- Commit buttons: Close. 


Error prevention Error prevention warnings are best presented using an in-place warning icon and explanatory text. 
Make user aware of information that 

might prevent a problem, especially - 

when making choices. @ On a hard disk 


a There may not be enough free space on this disk to save a backup. Please delete files or 
format the disk, or select another disk. 
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Add Hardware 


Welcome to the Add Hardware Wizard 


This wizard helps you install driver software to support older 
devices that do not support Plug-and-Play and which are not 
automatically recognized by Windows. 


You should only use this wizard if you are an advanced user 
or you have been directed here by technical support. 


& if your hardware came with an installation CD. 
it is recommended that you click Cancel to 
close this wizard and use the manufacturer's 
CD to install this hardware. 


Examples of error prevention warnings. 


Imminent problem 


The user needs to do something now eae eters 


to prevent an imminent problem. 


Close programs to prevent system failure 


Your computer is almost out of virtual memory which can cause windows or 
your programs to stop working. Willl lose information? 


Programs to close: 


e Windows Internet Explorer 
@® Fabrikam 
{3 Windows Media Player 


How can I prevent this problem? 


An example of an imminent problem warning. 


Imminent problem warnings have the following presentation: 


- Main instruction: Describe what the user needs to do now. 
- Supplemental instruction: Explain the condition and why it is important. 


« Commit buttons: A command button or command link for each option, or OK if the action occurs outside the 
dialog box. 


Risky action confirmation 

Confirm that the user wants to 
proceed with an action that has 
some risk and can't be easily undone. 
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Format F: 


A Formatting this volume will erase all data 
~ onit 


Back up any data you want to keep before formatting. 
Do you want to continue? 


EEE ee es 


An example of risky action confirmation. 
Risky action confirmations have the following presentation: 


- Main instruction: Ask a question to determine if the user wants to proceed. 
- Supplemental instruction: Explain any non-obvious reasons why the user might not want to proceed. 
- Commit buttons: Yes, No. 


For guidelines on this pattern, see Confirmations. 


Guidelines 
Presentation 


- Choose the presentation UI based on the type of information: 


User interface Best used for 


Modal dialog boxes |Critical warnings (including confirmations) that users must respond to now. 


Notifications Significant events or status that can be safely ignored, at least temporarily. 
Balloons A control is in a state that affects input. This state is likely unintended and the user may 


not realize input is affected. 


- For modal dialog boxes: 
o Use task dialogs whenever appropriate to achieve a consistent look and layout. Task dialogs require Windows Vista®or later, so 
they aren't suitable for earlier versions of Windows. 


o Display only one warning message per condition. For example, display a single warning that completely explains a condition instead 
of describing it one detail at a time per message. Displaying a sequence of warning dialogs for a single condition is confusing 
and annoying. 


o Don't display a warning more than once per condition. Constant warnings quickly become ineffective and annoying. Users 
often become more focused on getting rid of the warning than addressing the problem. If you must warn repeatedly for a 
single condition, use progressive escalation. 


Don't accompany warnings with a sound effect or beep. Doing so is jarring and unnecessary. 
o Exception: If the user must respond immediately, you can use a sound effect. 


Icons 


- Don't place a warning icon in the title bar of a dialog box. 


. Use a warning icon. Exceptions: 
o If the warning is for a feature that has an icon, you can use the feature icon with a warning overlay. 


Correct: 
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Security Information 


This page contains both secure and nonsecure 
items. 


Do you want to display the nonsecure items? 


In this example, the feature icon has a warning overlay. 
o For modal dialog boxes with a warning footnote, put the warning icon in the footnote instead of the content area. 


Correct: 


Internet Explorer - Security Warning 


Do you want to run this software? 


Ca Name: Windows Live Messenger 
Publisher: Microsoft Corporation 


(Y) More options (run) 


li While files from the Internet can be useful, this file type can potentially harm 
your computer. Only run software from publishers you trust. What's the risk? 


In this example, the footnote has the warning icon. 


For more guidelines and examples, see Standard Icons. 


Don't show this message again 
- Ifa warning dialog box needs this option, reconsider the warning and its frequency. If it has all the characteristics of a good 
warning (involves risk, and is immediately relevant, actionable, not obvious, and infrequent), it shouldn't make sense for users 
to suppress it. 


For more guidelines, see Dialog Boxes. 


Progressive disclosure 


- If you must include advanced information in a warning message, reveal it by using progressive disclosure buttons (for example, 
"Show details"). Doing so simplifies the warning for typical usage. Don't hide needed information because users might not find it. 


- Don't use "Show details" unless there really is more detail. Don't just restate the existing information in a different format. 


For labeling guidelines, see Progressive Disclosure. 


Default values 


- Select the safest, least destructive, or most secure response to be the default. 
Text 


General 


- Remove redundant text. Look for it in titles, main instructions, supplemental instructions, content areas, command links, and 
commit buttons. Generally, leave full text in instructions and interactive controls, and remove any redundancy from the other places. 


- Don't use the terms "warning" or "caution" in the text. When used correctly, the warning icon sufficiently communicates that 
users must proceed with caution. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 365 of 882 


Format Local Disk (F:) 


WARNING: Formatting will erase ALL data on this disk. 
== To format the disk, click OK. To quit, click CANCEL. 


Cox) [cancel] 


In this example, the term "warning" is unnecessary. 
Titles 


- Use the title to identify the command or feature where the warning came from. Exceptions: 
o If awarning is displayed by many different commands, consider using the program name instead. 


o If that title would be redundant or confusing with the main instruction, use the program name instead. 


Incorrect: 


Security Warning 


Allowing active content such as script and ActiveX controls can be useful. 
But active content might also harm your computer. 


Areyou sure you want to let this file run active content? 


[ves] L_No_] 


In this example, "Security Warning" doesn't identify the command or feature where the warning came from 


- Don't use the title to explain what to do in the dialog—that's the purpose of the main instruction. 
- Use title-style capitalization, without ending punctuation. 


Main instructions 


« The main instruction for a warning is based on its design pattern: 


Pattern Main instruction 


[Awareness 


Describe the condition or potential problem. 


|Imminent problem Describe what the user needs to do now. 


Risky action confirmation Ask a question to determine if the user wants to proceed. 


A, Low battery ~ 


You should change your battery or switch to 
outlet power immediately to keep from losing 
your work. 


In this example, the low battery notification is an awareness warning, so the main instruction describes the 
condition. 
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Low Battery 


A Change your battery or switch to outlet power immediately 


Your computer has a low battery, so you should act immediately to keep 
from losing your work. 


In this example, the low battery dialog box is an imminent problem, so the main instruction describes what the 
user needs to do now. 


- Be concise—use only a single, complete sentence. Strip the main instruction down to the essential information. If you must 
explain anything more, use a Supplemental instruction. 


Use words like "now" and "immediately" if the user must act immediately. Don't use these words if there is no urgency. 
- Be specific—if there are objects involved, give their full names. 


Use sentence-style capitalization. 
Supplemental instructions 


+ The supplemental instruction for a warning is based on its design pattern: 


Pattern [Supplemental instruction 

Awareness [Explain the implication and why it is important. 

Imminent problem [Explain the condition and why it is important. 

Risky action confirmation [Explain any non-obvious reasons why the user might not want to proceed. 


- Don't repeat the main instruction with slightly different wording. Instead, omit the supplemental instruction if there is not more 
to add. 


. Use complete sentences, sentence-style capitalization, and ending punctuation. 
Commit buttons 


- For warning dialog boxes, the commit buttons are based on its design pattern: 


Pattern Commit buttons 


|Awareness Close. Don't use OK because it suggests that potential problems are OK. 


Imminent problem A command button or command link for each option, or OK if the action occurs 
outside the dialog box. 


|Risky action confirmation |Yes, No. 


Incorrect: 


Microsoft Office Outlook 


There was a problem reading one or more of your reminders. Some reminders may not appear. 
= Network problems are preventing connection to the Microsoft Exchange Server computer. 


Lx) 


Problems aren't OK, so use Close instead. 
Documentation 
When referring to warnings: 


- If the warning asks a question, refer to a warning by its question; otherwise, use the main instruction. If the question or main 
instruction is long or detailed, summarize it. 


. If necessary, you may refer to a warning dialog box as a message. 


- When possible, format the text using bold. Otherwise, put the text in quotation marks only if required to prevent confusion. 
© 2010, Microsoft Corporation. All rights reserved. 


Page 367 of 882 


Example: In the Do you want to display the nonsecure items? message, click Yes. 
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Confirmations 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
General 
Icons 
Commit buttons 
Command links 
Default values 
Don't show this message again 
Bulk operations 
Progressive disclosure 
User Account Control 
Text 
Documentation 


A confirmation is a modal dialog box that asks if the user wants to proceed with an action. 


Notepad 


Do you want to save changes to C:\New 
document.txt? 


| Don't save } | Cancel 


A typical confirmation. 
Confirmations have these essential characteristics: 


« They are displayed as the direct result of an action initiated by the user. 
- They verify that the user wants to proceed with the action. 
- They consist of a simple question and two or more responses. 


Confirmations are most useful when the action requires the user to make a relevant and distinct choice that can't 
be made later. That choice often involves some element of risk that isn't obvious to the user, but risk isn't 
essential to confirmations. These elements are necessary to justify the interruption of responding to a modal 
dialog. 


By contrast, warning messages present a condition that might cause a problem in the future. Their fundamental 
characteristic is that they involve risk: 


« They involve potential loss of one or more of the following: 
o A valuable asset, such as data loss or financial loss. 


o System access or integrity. 
o Privacy or control over confidential information. 
o User's time (a significant amount, such as 30 seconds or more). 
« They have unexpected or unintended consequences. 
« They require correct handling now because mistakes can't be easily fixed, and may even be irreversible. 


If a confirmation involves risk, it can be considered a warning as well. Consequently, the warning message 
guidelines also apply. 


Note: Guidelines related to dialog boxes, error messages, warning messages, and layout are presented in 
separate articles. 


Is this the right user interface? 


To decide, consider these questions: 


- Isthe user being asked a question to proceed with an action that has two or more responses? If not, the message isn't a confirmation. 


- Isthe UI presenting an error or problem that has occurred? If so, use an error message instead. 


- Does proceeding with the action require the user to make a choice that doesn't have a suitable default? If so, a confirmation may 
be appropriate. 


- Isthere an alternative design that eliminates the need for the confirmation? The need for a confirmation sometimes indicates a 
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design flaw. Often there is a better design alternative that doesn't need a confirmation. 


Is the user about to perform a risky action? If so, a confirmation is appropriate if the action has significant consequences or cannot 
be easily undone. 


Is the user about to abandon a task? If so, don't confirm. Assume users understand the consequences of not completing a task. 


Does the action have consequences that users might not be aware of? If so, a confirmation may be appropriate. 


Given the current context, are users likely to be performing an action in error? If so, a confirmation may be appropriate. 


Do users perform the action frequently? If so, consider an alternative design. Frequent confirmations are annoying and have little 
value because users learn to respond without thinking. 


Does the action have security implications? If so, a confirmation may be required even if the previous tests indicate otherwise. 


Design concepts 
Unnecessary confirmations are annoying 


The first Windows confirmation ever created undoubtedly looked like this: 


Annoying Confirmation 


[2] Are you sure? 


(ves) (no) 


The original annoying confirmation. 


This was a very bad start. If you want users to hate your program, just sprinkle confirmations like this throughout. 
To understand why, consider the user's point of view. The user just asked to perform an action—by the definition 
of a confirmation—so unless something was somehow clicked or pressed accidentally, of course the user wants 
to proceed. 


Not only are unnecessary confirmations annoying, but they aren't effective in protecting the user from mistakes. 
Users quickly discover when a program has unnecessary confirmations and their natural response is to dismiss 
them as quickly as possible, often without reading. Consequently, such confirmations do little more than add an 
extra step to these tasks. 


Don't use confirmations just because there is the possibility of users making a mistake. Rather, confirmations are 
most effective when used to confirm actions that have significant or unintended consequences. Good 
confirmations never state the obvious; they should communicate something users need to be aware of—a good 
reason not to continue. And they are used only when they are really needed by an action, such as asking users to 
save changes only when there are changes worth saving. Doing so demands the user's attention only when it is 
truly warranted. 


For other types of confirmations, there is often a better design alternative than forcing users to answer a 
question. 


Consider the design alternatives 


Here are some design alternatives that eliminate the need for routine confirmations: 


Prevent errors. Design tasks so that significant mistakes are difficult to do accidentally. For example, physically separate 
destructive commands from other commands, and require multiple actions to complete. 


Provide undo. Provide the ability to revert actions. For example, deleting a file in Microsoft®W indows®usually doesn't require 
a confirmation because deleted files can be recovered from the Recycle Bin. Note that if an action is very easy to perform, just 
having users redo the action may be sufficient. 


Provide feedback. M ake undesirable outcomes obvious. Providing undo alone isn't sufficient if users don't realize when they make 
a mistake. For example, the effect of direct manipulation (such as a drag-and-drop operation) should always be obvious. 


Assume the probable outcome, but make it easy to change. If you aren't sure what users want but there is a likely, safe, and 
secure choice, assume that choice, make it clear what happened, and make it easy to change using a context menu. For 
example, Microsoft Word assumes that users want to spell words correctly. If it recognizes a misspelled word and it knows the 
likely correct spelling, Word automatically makes the correction but allows users to revert. 


Eliminate the choice completely. If the choice isn't important, users just won't care. Better to simplify your program and eliminate 
the choice. 


Make confirmations require thought 


For a confirmation to have value, users need to understand the reason not to proceed. Sometimes the reason is 
obvious, as when users are closing a document with changes that haven't been saved: 
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Do you want to save changes to Untitled? 


(_seve_} [_Donttsave_] [Cancel | 


In this example, the reason for the confirmation is obvious. 

In other situations, the reason might not be so obvious. 

When choosing commit button labels for dialog boxes, the general guideline is to choose labels that are specific 
responses to the main instruction. This leads to efficient decision making because users have to read a minimum 


amount of text to proceed. However, this efficiency goal can be counterproductive for confirmations. Consider 
this example: 


Incorrect: 


Microsoft SQL Server 
A Do you want to uninstall the Setup Support Files? 
Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 


If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


In this example, the correct response requires thought. 


If you present this confirmation immediately after the user gave the Uninstall command, the user's response is 
likely to be "Of course | want to uninstall!" The user will click Uninstall without giving it a second thought. 


For confirmations, we don't want users making hasty, emotional decisions. To encourage users to think about 
their response, we need to provide a small decision-making speed bump. When practical, it's usually better to do 


this by carefully phrasing commit buttons. For example, we can use additional language to indicate that there is a 
reason not to continue. 


Better: 


Microsoft SQL Server 
A Do you want to uninstall the Setup Support Files? 
Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 


If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


In this example, "anyway" is added to the commit button label to indicate that the confirmation gives a reason 
not to continue. 


If that approach isn't practical, we can use Yes/No commit buttons. 


Also better: 


© 2010, Microsoft Corporation. All rights reserved. 


Page 371 of 882 


Microsoft SQL Server 


A Do you want to uninstall the Setup Support Files? 


Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 
If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


In this example, using Yes/No commit buttons forces users to at least read the main instruction. 
Provide all the information 


If you are going to ask a question, you must provide sufficient information for users to answer that question 
intelligently. Consider the Confirm File Replace dialog from Windows XP: 


Confirm File Replace 
ey This Folder already contains a file named ‘Desert Landscape. jpg’. 
Would you like to replace the existing file 


a 223 KB 
modified: Thursday, December 7, 2006 1:14:09 PM 


with this one? 


223 KB 
modified: Today, December 8, 2006, 5:15:52 PM 


The Windows XP Confirm File Replace dialog box. 


Does this confirmation provide all the information users might need to answer the question? Before you answer, 
consider the most common user scenarios: 


. Copy (or move) the other file, replacing the existing one. 

. Keep the existing file, without copying or moving the other file. 

. Keep or copy the newer file (top scenario). 

. Either keep the existing file or copy the other file, depending on criteria such as file contents and size. 
. Keep the existing file and copy the other file using a different name. 


ou F&F WwW NY 


. Cancel the operation if something is wrong or unexpected. 


Users can achieve scenario 1 by clicking Yes and scenario 2 by clicking No. They can achieve scenario 3 by 
comparing the file dates and clicking the appropriate button, but notice how much thought it takes to determine 
the newer file and then determine the appropriate button—especially for what is likely to be the most common 
scenario. 


Scenarios 4, 5, and 6 are also surprisingly difficult. The file sizes are rounded off, so, for example, it is impossible 
to determine if these files have the same size or even if they are the same file. The icons are for the application 
used to open the file, so users would have to open the files to inspect and compare their content. Having 
thumbnails of the file content would be far more useful in answering the question. 


The Copy File confirmation from Windows Vista®does a much better job of handling these scenarios by providing 
more information and adding the option to keep both files: 
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There is already a file with the same name in this location 
Click the file you want to keep. 


> Copy and Replace 
Replace the file in the destination folder with the file you are copying: 
Desert Landscape.jpg 
Desert Landscape (C:\New) 
Size: 223 KB 
Date modified: 10/10/2007 10:10 AM (newer) 


> Don't copy 


No files will be changed. Leave this file in the destination folder: 
Desert Landscape (C:\Old) 
Size: 240 KB (larger) 
Date modified: 10/20/2006 12:26 PM 


> Copy, but keep both files 
The file you are copying will be renamed "Desert Landscape (2).jpg" 


The Windows Vista Copy File confirmation. 

Provide specific, useful information 

If you are going to ask a question, ensure that users understand the question and the implications of the 
alternative responses. Consider this Windows Internet Explorer ®security confirmation: 


Internet Explorer 


“?) This page is accessing information that is not under 
iy its control. This poses a security risk. Do you want to 
continue? 


A vague security confirmation. 


This confirmation asks a question that users can't possibly answer intelligently. The user has requested that 
Windows Internet Explorer display a page, and this message advises against it implicitly through the wording of 
the text and by highlighting No as the default choice. 


The specific security issue that the page poses is not sufficiently explained, so the risk of continuing isn't clear. 
What information in the confirmation would cause the user ever to click No? Because of the vagueness of the 
message, the confirmation isn't likely to discourage users from continuing, but will make them feel bad about 
doing so. 


For this confirmation to be useful, it must provide more information—specific information that might cause the 
user to decide not to proceed. In general, for each response in a confirmation, consider the scenarios that require 
it and make sure that there is sufficient information provided for users to want to choose it. Provide choices, not 
dilemmas. 


How to determine if a confirmation is necessary 


Thinking through the scenarios and the likelihood of choosing each response suggests a systematic way to 
determine if a confirmation is necessary. If users are likely to select all of the responses, the confirmation is 
necessary and useful. However, if only one response is likely (say 98 percent of the time), the confirmation is 
clearly unnecessary and should be removed. Note that confirmations related to security, legal, and safety issues 
are possible exceptions. 
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0 Are you sure you want to change the settings for this zone? 


Cvs J | 


Is this confirmation necessary? Will users ever select No? It's possible but very improbable. This confirmation 
should be removed. 


If you do only three things... 
1. Make sure your confirmation is really necessary. There should be a legitimate and clear reason not to proceed, 


and a chance that sometimes users won't. 


2. If the reason for the confirmation isn't immediately obvious, choose commit buttons that encourage users to 
think about their response. Typically, this is done by phrasing the confirmation as a yes or no question and 
providing completely self-explanatory or Yes/No answers. 


3. Consider all the scenarios and provide the information required to answer the question intelligently. 


Usage patterns 
Confirmations have several usage patterns: 


Routine confirmations These confirmations are usually phrased "Are you sure...?" and often have a Don't show this message again check box to minimize 


Confirm that the user wants to their annoyance. 
proceed with a routine, low risk 
action. 


‘> Are you sure you want to move this folder to the Recycle Bin? 


& ee New Folder 
Date created: 12/12/2006 9:26 PM 


Microsoft Office Outlook 


Areyou sure you want to dismiss all these 
reminders? 


Don't show this message again 


Se) le 


Examples of routine confirmations. 


Note: This pattern is usually unnecessary and should be avoided. 


Risky action confirmations Because they have risk, these confirmations usually have a warning icon. 
Confirm that the user wants to 

proceed with an action that has 

some risk and can't be easily undone. 
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Unintended consequence 
confirmations 

Confirm that the user wants to 
proceed with an action that has 
unexpected or unintended 
consequences. 


Formatting this volume will erase all data on it. Back up any data you 
want to keep before formatting. Do you want to continue? 


Do you want to permanently delete this folder? 
This folder must be deleted because it is too large for the Recycle Bin. 


Music 
Date created: 12/8/2006 2:28 AM 


Examples of risky action confirmations. 


In addition to asking a question, these confirmations point out the unintended consequences. Because they have 
unintended consequences, these confirmations usually have a warning icon. 


= Ser gone eel er cheers ail eae 


ceil 


A Are you sure you want to navigate away from this page? 


Moving away from this page will cancel the install process. Some items will not get installed. 
Press OK to continue, or Cancel to stay on the current page. 


Cox) (_cancet_} 


Examples of unintended consequence confirmations. 
However, this pattern requires that the consequences are truly unintended. 
Incorrect: 

Fabrikam Key Logger 


You have chosen to turn off Fabrikam Key Logger. If you continue, you will no longer receive 
its many benefits. We strongly recommend that you do not turn off Fabrikam Key Logger. 
Areyou sure that you want to continue? 


{yes} (_No_) 
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The consequences are intended here, so this is a routine confirmation. 


Clarifications Drag-and-drop operations can result in clarifications if the effect of the operation can be misinterpreted. 
Clarify how the user wants to 
proceed with an action that has 
potentially ambiguous or unexpected 


consequences. Microsoft Office Outlook 


You changed the date of this occurrence of “Trades”. If you want to change the date of all the occurrences, you must 
first open the appointment series. Do you want to change only this occurrence? 


What do you want to do with the game in progress? 


Always savegame on ext (__Save [_cancel_| 


Examples of clarifications. 


Note: This pattern should be avoided because it is better to design actions without ambiguous consequences and assume the 
most likely desired result. 


Security confirmations 
Confirm that the user wants to 
proceed with an action with security 


consequences. Do you want to run this software? 


Windows Live Messenger 
Microsoft Corporation 


(econ 


While files from the Internet can be useful, this file type can potentially harm 
your computer. Only run software from publishers you trust. What's the risk? 


AutoComplete Passwords 


e Do you want Intemet Explorer to remember this 
Password? 


Intemet Explorer can remember this password so you dont 
have to type it again the next time you visit this page 


[-] Dont offer to remember any more passwords 


Lem aba AdsConne 


Examples of security confirmations. 


Ulterior motive confirmations While these dialog boxes are presented as confirmations, their real goal is user education or advertisement of features. 
Provide information about an action, 
but present it as a confirmation. 
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Windows Media Player 


Do you want the Windows Media Player 
toolbar on your taskbar? 


Se Ge 


(i) You can show or hide toolbars by changing Taskbar and 
Start menu properties. 
—__| 


An example of an ulterior motive confirmation. 


Note: This pattern is not recommended because there is usually a better, more direct alternative. For example, animations are a 
better way to show the relationship between cause and effect. 


Guidelines 
General 


« Use "Save changes" confirmations only when there are significant changes. Don't confirm changes that weren't directly made by 
the user, such as automatic document reformatting. 


Incorrect: 
Microsoft Office Outlook 


yN Do you want to save changes? 


od oo 


This example is incorrect when used for an empty e-mail or document that wasn't changed by the user. 
Icons 


« Confirmations don't use title bar icons. 
- The content area icon for a confirmation is based on its design pattern: 


Pattern Icon 

Routine confirmations No icon. 

Risky action confirmations Warning icon. 

Unintended consequence Use a warning icon if there is risk, the feature icon if available; 

confirmations otherwise, no icon. 

[Clarifications = ~~ | If the confirmation involves a document, use the document's 
thumbnail; otherwise, use the feature icon if available, or no icon. 

Security confirmations Warning icon. 

Ulterior motive confirmations No icon. 


- Don't use warning icons for routine questions. Doing so is counter to the encouraging tone of Windows and makes using your 
program feel like a hazardous activity. Assume users understand the consequences of canceling a task before it is finished. 


Incorrect: 


Speech Recognition Tutorial 


A Do you want to end the tutorial? 


Completing the tutorial will improve the accuracy of Speech 
Recognition. 


[ves | (_Ne J 


In this example, a warning icon is used to ask a routine question. 


Commit buttons 
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. Use specific responses to the main instruction if the reason for the confirmation is obvious or can be made self explanatory. 


Do you want to save changes to Untitled? 


(_seve_} [_Don'tsave_] [_Cancel_| 


In this example, the reason for the confirmation is obvious, so Save and Don't save work well. 


- Otherwise, use Yes and No buttons for confirmation responses. Doing so makes users give the confirmation some thought 
before responding. Never use OK and Cancel for confirmations. 


Correct: 
Microsoft SQL Server 


A Do you want to uninstall the Setup Support Files? 


Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 
If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


[ves JC Ne J 


In this example, using Yes/No commit buttons forces users to at least read the main instruction. 
Incorrect: 
Fabrikam Reservations 


y% Cancel your reservation? 


Cox) (_cancet_} 


In this example, using OK/ Cancel is confusing. 


- To close a program or restart Windows, use specific responses to the main instruction. To prevent any misunderstanding, don't 
use Close or Yes/No for this purpose. 


Correct: 


Fabrikam Install 


Incorrect: 
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Fabrikam Install 


To finish installing Fabrikam, you need to restart your computer. 
Would you like to restart your computer now? 


[ves] (No) 


In the incorrect example, Yes is used to restart Windows. 
Command links 
- For the clarifications pattern, consider using command links to make the alternatives clear. 
Acceptable: 


Microsoft Office Outlook 


You changed the date of this occurrence of “Trades”. If you want to change the date of all the occurrences, you must 
first open the appointment series. Do you want to change only this occurrence? 


Better: 


Microsoft Office Outlook 


You changed the date of this occurrence of “Trades” 


> Change just this occurrence 


> Change all occurrences 


In the better example, command links make the alternatives clear. 


- Present the most commonly used command links first. The resulting order should roughly follow the likelihood of use, but also have 
a logical flow. 


+ lf acommand link requires further explanation, provide a supplemental explanation. Supplemental explanations describe why 
users might want to choose the option or what happens if the option is chosen. 
For more guidelines and examples, see Command Links. 


Default values 


- The default response for a confirmation is based on its design pattern: 


Pattern Default response 

Routine confirmations Proceed. 

[Risky action confirmations = Don't proceed (or the safe choice). 
confirmations 

[Clarifications = ~~~ (Themost likely response. 
[Security confirmations Ct Don't proceed. 

Ulterior motive confirmations —_| Proceed. 


Don't show this message again 


.« Use this option only for the routine and ulterior motive confirmation patterns. For the other patterns, if the information is 
necessary, it should always be displayed. 


- Don't ide this option to justify displaying an unnecessary confirmation. | ust get rid of the confirmation instead. 
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Incorrect: 


Microsoft Office Outlook 


Areyou sure you want to dismiss all these 
reminders? 


(res) (me) 


Still incorrect: 


Microsoft Office Outlook 


Areyou sure you want to dismiss all these 
reminders? 


[| Don't show this message again 


Ces J] 


In these examples, adding a Don't show this message again option doesn't fix an unnecessary confirmation. 


For more guidelines, see Dialog Boxes. 


Bulk operations 


- For confirmations that apply to bulk operations, provide an option to apply the confirmation to the entire operation. 


Delete File 


The file '~WRLO521.tmp’ is a system file. If you remove it, Windows or another 
>a program may no longer work correctly. 


Are you sure you want to permanently delete it? 


. ~WRLOS21.tmp 
(S-Type: TMP File 
| Size: 58.0 KB 
Date modified: 2/13/2007 11:22 PM 


[ve] (skip } [cancel | 


[©] Do this for all current items 


This example has an option for bulk operations. 
« Eliminate or postpone confirmations in a bulk operation. 


Incorrect: 


Confirm File Delete 


The file 'New Text Document. txt' is a read-only file. Are 
i you sure you want to move it to the Recycle Bin? 


In this example, Windows Explorer in Windows XP confirms each read-only file during a bulk file move. Better just 
to copy the read-only files without asking, or postpone handling these files and present the confirmation at the 


end of the task. 
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- If you must include advanced information in a confirmation message, reveal it by using progressive disclosure buttons (for 
example, "Show details"). Doing so simplifies the confirmation for typical usage. Don't hide needed information because users 
might not find it. 


- Don't use "Show details" unless there really is more detail. Don't just restate the existing information in a different format. 
For labeling guidelines, see Progressive Disclosure. 
User Account Control 


- Don't use the User Account Control (UAC) elevation UI as a substitute for a confirmation. If an action needs a confirmation, use 


a separate dialog box. During the elevation UI, users need to focus on whether they started task and if the program is trustworthy. 


- Display the confirmation before the elevation UI. Doing so eliminates unnecessary elevations. 
Text 
General 
- Remove redundant text. Look for redundant text in titles, main instructions, supplemental instructions, content areas, command 


links, and commit buttons. Generally, leave full text in instructions and interactive controls, and remove any redundancy from the 
other places. 


Don't use "warning" or "caution" in the text. If users need to proceed with caution, indicate this using a warning icon instead. 


Incorrect: 


Format Local Disk (F:) 


WARNING: Formatting will erase ALL data on this disk. 
To format the disk, click OK. To quit, click CANCEL. 


In this example, the term "warning" is unnecessary. 


Titles 


Use the title to identify the command or feature where the confirmation came from. Exceptions: 
o If aconfirmation is displayed by many different commands, consider using the program name instead. 


o If that title would be redundant or confusing with the main instruction, use the program name instead. 


However, if the confirmation is from a long-running task and may display well after the task started, always use the command or 
feature to clearly identify the context. 


Don't use the title to explain what to do in the dialog—that's the purpose of the main instruction. 
If it adds clarity, start the title with the word Confirm. 
For risky action confirmations, you may add the name of the object involved for extra emphasis. 


Formatting this volume will erase all data on it. Back up any data you 
= want to keep before formatting. Do you want to continue? 


[yes | (__wo_) 


In this example, the drive to be formatted is included in the title. 
. Use title-style capitalization, without ending punctuation. 
Main instructions 


- The main instruction for a confirmation is based on its design pattern: 


Pattern Main instruction 
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Unintended consequence State the unintended consequence. 
confirmations Exception: If a question asking if the user wants to proceed clearly implies the unintended consequence, ask the 
question instead. 


Internet Explorer 


Do you want to close all tabs? 


© Show oto 


In this example, asking the user to proceed sufficiently conveys the consequences of the action. 


All others Ask a single question to determine if the user wants to proceed. 


- Be concise—use only a single, complete sentence. Strip the main instruction down to the essential information. If you must 
explain anything more, use a supplemental instruction. 


- Be specific—if there are objects involved, give their full names. 


- Use positive phrasing. Positive phrasing is easier for users to understand. 


Correct: 
Do you want to enable file and printer sharing? 


Incorrect: 
Do you want to disable file and printer sharing? 


However, phrasing must match the associated command, even if the command is negatively phrased; so, for 
example, use disable to confirm a Disable command. 


« While there are no strict rules for phrasing, these common confirmation phrases have the indicated connotation: 


Phrase 


Connotation 


Are you sure you want to [perform an action]? 


Confirming the direct result of a user request. 


Do you want to [perform an action]? 


Confirming a side effect of a user request. 


Would you like to [select a result]? 


Need a clarification. 


[Perform an action]? 


No connotation. 


- For risky action confirmations, use the term permanently to indicate that an action can't be undone. 


Delete Folder 


sail Are you sure you want to permanently delete this folder? 


Program Files 
Date created: 10/20/2006 10:54 PM 


In this example, "permanently" indicates that the action can't be undone. 


. Use sentence-style capitalization. 


Supplemental instructions 


- The supplemental instruction for a confirmation is based on its design pattern: 
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Pattern Supplemental instruction 
Unintended consequence Aska single question to determine if the user wants to proceed. 
confirmations 
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- Don't repeat the main instruction with slightly different wording. Instead, omit the supplemental instruction if there is not more 


- For unintended consequence confirmations, consider using the term anyway to concisely indicate that there is a reason not 


All others 


Explain any non-obvious reasons why the user might not want to 
proceed. Such reasons include: 
o Potential loss of one or more of the following: 
« A valuable asset, such as data loss or financial loss. 


= System access or integrity. 
= Privacy or control over confidential information. 
o Actions that are irreversible. 


to add. 


to continue in case the user overlooked the main instruction. See Design concepts for more information. 


« Use complete sentences, sentence-style capitalization, and ending punctuation. 


Documentation 


When referring to confirmations: 


Refer to a confirmation by its title if the title is specific to the confirmation (that is, not the program name); otherwise, refer to it by 


its main instruction. 


If necessary, you may refer to a confirmation dialog box as a message. 


Use the exact text, including its capitalization. 


When possible, format the text using bold. Otherwise, put the text in quotation marks only if required to prevent confusion. 


Example: In the Copy File message, click the newer file. 
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Notifications 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
General 
What to notify 
When to notify 
How long to notify 
How often to notify 
Notification escalation 
Interaction 
Icons 
Notification queuing 
System integration 
Text 
Documentation 


A notification informs users of events that are unrelated to the current user activity, by briefly displaying a 
balloon from an icon in the notification area. The notification could result from a user action or significant system 
event, or could offer potentially useful information from Microsoft ®Windows@®or an application. 


The information in a notification is useful and relevant, but never critical. Consequently, notifications don't 
require immediate user action and users can freely ignore them. 


Options button Close button 


iV] Windows installed new updates 
© Your computer was restarted to finish installing updates. 
Click to see which updates were installed. 


A typical notification. 


In Windows Vista®and later, notifications are displayed for a fixed duration of 9 seconds. Notifications aren't 
displayed immediately when users are inactive or screen savers are running. Windows automatically queues 
notifications during these times, and displays the queued notifications when the user resumes regular activity. 
Consequently, you don't have to do anything to handle these special circumstances. 


Developers: You can determine when the user is active using the SHQueryUserNotificationState API. 


Note: Guidelines related to notification area, taskbar, and balloons are presented in separate articles. 


Is this the right user interface? 
To decide, consider these questions: 


- Is the information the immediate, direct result of users’ interaction with your application? If so, display this synchronous 
information directly within your application instead using a dialog box, message box, balloon, or in place UI. Notifications are for 
asynchronous information only. 
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@ Windows Security Alert 


G Windows Firewall has blocked some features of this program 


recaps Firewall has blocked some features of Microsoft Office Communicator 2007 R2 on all 
public, private and domain networks. 


‘= iv Name: Microsoft Office Communicator 2007 R2 
Microsoft Corporation 


Path: C:\program files (x86) \microsoft office communicator 
icator.exe 


This program has already been blocked or unblocked for a different network location. 
Allow Microsoft Office Communicator 2007 R2 to communicate on these networks: 
|W] Domain networks, such as a workplace network 


Private networks, such as my home or work network. The firewall is already configured for 
this network location. 


|] Public networks, such as those in airports and coffee shops (not recommended 
because these networks often have little or no security) 


What are the risks of allowing a program through a firewall? 


an cs 


In this example, the Windows Firewall exceptions dialog box is displayed as a direct result of user interaction. A 
notification wouldn't be appropriate here. 


Is the information relevant only when users are actively using your application? If so, display the information in your 
application's status bar or other status area. 


Waiting to update this folder. £3 Connected to Microsoft Exchange * | 


In this example, Outlook displays its connection and synchronization state on its status bar. 


Is the information rapidly changing, continuous, real-time information? Examples include processing progress, stock quotes, and 
sports scores. If so, don't use notifications because they aren't suitable for rapidly changing information. 


Is the information useful and relevant? Are users likely to change their behavior or avoid inconvenience as the result of 
receiving the information? If not, either don't display the information or put it in a status window or log file. 


Is the information critical? Is immediate action required? If so, display the information using an interface that demands attention 
and cannot be easily ignored, such as a modal dialog box or message box. If the program isn't active, you can draw attention to 
the critical information by flashing the program's taskbar button three times and leaving it highlighted until the program is active. 


Are the primary target users IT professionals? If so, use an alternative feedback mechanism such as log file entries or e-mail 
messages. IT professionals strongly prefer log files for non-critical information. Furthermore, servers are often managed remotely 
and typically run without any users logged on, making notifications ineffective. 


Design concepts 
Effective notifications that promote a good user experience are: 


- Asynchronous. The event is not an immediate, direct result of users' current interaction with M icrosoft®Windows@®or your 
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application. 
Useful. There is a reasonable chance that users will perform a task or change their behavior as the result of the notification. 


Relevant. The notification displays helpful information that users care about and don't already know. 


Not critical. Notifications aren't modal and don't require user interaction, so users can freely ignore them. 


Actionable. For those notifications that suggest performing an action, that action is initiated by clicking on the notification. 
However, the action can always be postponed. 


Appropriately presented. The notification's presentation (duration, frequency, text, icon, and interactivity) matches its 
circumstances. 


Not annoying! There is a fine line between gently informing users of an event and pestering them. 


Unfortunately, there are too many annoying, inappropriate, useless, irrelevant notifications out there. Consider 
these notifications from the Windows XP Hall of Shame: 


.y) Take a tour of Windows XP x 


To learn about the exciting new features in XP now, click here. 
To take the tour later, click All Programs on the Start menu, 
and then click Accessories. 


A There are unused icons on your desktop * 


The desktop cleanup wizard can help you clean up your 
desktop. Click this balloon to start the wizard, 


4D Add your .NET Passport to Windows XP! 


You've just connected to the Internet. You need a Passport 
to use Windows XP Internet communications Features (such as 
instant messaging, voice chat, and video), and to access .NET 
-enabled services on the Internet, 


Click here to set up your Passport now 


In these examples, Windows XP is ostensibly attempting to assist users with their initial configuration. However, 
these notifications pop up far too often and well after they are useful, so they are little more than unsolicited 
feature advertisements. 


User flow must be maintained 


Ideally, users immersed in their work won't see your notifications at all. Rather, they'll see your notifications 
only when their flow is already broken. 


In Flow: The Psychology of Optimal Experience, Mihaly Csikszentmihalyi says that users enter a flow state when 
they are fully absorbed in activity during which they lose their sense of time and have feelings of great 
satisfaction. 


Effective notifications help users maintain their flow by presenting useful, relevant information that can easily 
be ignored. The notifications are presented in a low-key, peripheral way, and they don't require interaction. 


Don't assume that if notifications are modeless they can't be an annoying interruption. Notifications don't 
demand users' attention, but they certainly request it. You can break users flow by: 
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- Displaying notifications that users don't care about. 

- Displaying a notification too often. 

- Using several notifications when a single notification is sufficient. 
- Using sound when displaying a notification. 


In Windows 7, users have ultimate control over notifications. If users find that a program's notifications are too 
annoying, they can choose to suppress all notifications from that program. M ake sure users don't do this to 
your program by presenting useful, relevant information and following these guidelines. 


Notifications must be ignorable 
Notifications don't require immediate user action and users can freely ignore them. 


Developers and designers often want to present their notifications in a way that users can't ignore. This goal 
completely undermines the primary benefit of notifications because it would break users’ flow. If users are 
distracted by your notifications or feel obligated to read them, your notification design has failed. 


If you are concerned that users are ignoring your notifications, consider the following: 


- If you are using notifications correctly and they don't require immediate user action, then having users choose to ignore them is 
by design. Don't change this. 


- If the event requires immediate user action, use an alternative user interface (UI) that users cannot ignore. See Is this the right 
user interface? for the alternatives. 


Use progressive escalation where applicable 


If a notification is used for an event that users can safely ignore at first, but that must addressed eventually, an 
alternative UI should be used when the situation becomes critical. This technique is known as progressive 
escalation. 


For example, the Windows power management system initially indicates a low battery by simply changing its 
notification area icon. 


DOE ee 


In these examples, Windows power management uses the notification area icon to notify users of progressively 
lower battery power. 


As the battery power becomes lower, Windows warns users of weak battery power using a notification. 


2 = 27 min (10%) remaining 
Your battery is low (10%). if you need to continue using 
your computer, either plug in your computer, or shut it 
down and then change the battery. 


In this example, Windows power management uses a notification to tell users that their battery power is weak. 


This notification appears while users still have several options. Users can plug in, change their power options, 
wrap up their work and shut down the computer, or ignore the notification and continue working. As the battery 
power continues to drain, the notification's text and icon reflect the additional urgency. However, once the 


mater Bowe! becomes so low that users must act immediately, Windows power management notifies users 
© 2010, Microsoft Corporation. All rights reserved. Page 387 of 882 


using a modal message box. 


a Reserved Battery Level 


| Plug in or find another power source 


Your battery power is low (6%). If you don’t plug in your 
computer soon, it will hibernate automatically. 


In this example, Windows power management uses a modal message box to notify users of critically low battery 
power. 


If you do only three things... 


1. Use notifications only if you really need to. When you display a notification, you are potentially interrupting 
users or even annoying them. M ake sure that interruption is justified. 


2. Use notifications for non-critical events or situations that don't require immediate user action. For critical 
events or situations that require immediate user action, use an alternative UI (such as a modal dialog box). 


3. If you use notifications, make it a good user experience. Don't try to force users to see your notifications. If 
users are so immersed in their work that they don't see your notifications, your design is good. 


Usage patterns 


Notifications have several usage patterns: 


Action success _ Correct: 

Notifies users 

when an > : ; 

asinchrangls: iV) Windows installed new updates * * 
“= Click to see which updates were installed. 


user initiated 
action completes 
successfully. 


In this example, Windows Update notifies users when their computer has been updated successfully. 


Incorrect: 


A Microsoft Office Outlook * * 


Data file check complete. 


“ie 


In this example, Microsoft Outlook ®notifies users when a data file check is complete. What are users supposed to 
do now? And why warn users about successful completion? 


Show when: Upon completion of an asynchronous task. Notify users of successful actions only if they are likely to 
be waiting for completion, or after recent failures. 

Show how: Use the real-time option so that these notifications aren't queued when users are running a full- 
screen application or aren't actively using their computer. 


; Show how often: Once. 
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Annoyance factor: Low if success isn't expected due to recent failures, success is after a critical or highly unusual 
failure so user needs additional feedback, or user is waiting for completion; high if not. 

Alternatives: Give feedback "on demand" by displaying an icon (or changing an existing icon) in the notification 
area while the operation is being performed; remove the icon (or restore the previous icon) when the operation 
is complete. 


Action failure Correct: 
Notifies users 


when an , : : : line 
asynchronous, “a _ Device driver software was not successfully installed “* 
user initiated fe) Click here for details. 
action fails. 
In this example, Windows activation notifies users of failure. 
Incorrect: 
A Microsoft Office Outlook * * 
Unable to update public free/busy data. 
In this example, Microsoft Outlook used to notify users of a failure that they are unlikely to care about. 
Show when: Upon failure of an asynchronous task. 
Show how often: Once. 
Annoyance factor: Low if useful and relevant; high if the problem will immediately resolve itself or users 
otherwise don't care. 
Alternatives: Use a modal dialog box if users must address the failure immediately. 
Non-critical 
system event * : ee 
Notifies users of 27 min (10%) remaining 
significant Your battery is low (10%). if you need to continue using 
system events or your computer, either plug in your computer, or shut it 


status that can down and then change the battery. 

be safely _| 

ignored, at least me ~ 
temporarily. 


In this example, Windows warns users of low battery power, but there is still plenty of time before they have take 
action. 


Show when: When an event occurs and the user is active, or a condition continues to exist. If resulting from a 
problem, remove currently displayed notifications immediately once the problem is resolved. As with action 
notifications, notify users of successful system events only if users are likely to be waiting for the event, or after 
recent failures. 

Show how often: Once when the event first occurs. If this results from a problem that users need to solve, 
redisplay once a day. 

Annoyance factor: Low, as long as the notification isn't displayed too often. 

Alternatives: If users must eventually resolve a problem, use progressive escalation by ultimately displaying a 
modal dialog box when resolution becomes mandatory. 
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Optional user 


task a 

Natinesacers of ry) New updates are available wx 

asynchronous x Click to install them using Windows Update. 

tasks they 

should perform. 

Whether 

optional or 

required, the In this example, Windows Update is notifying users of a new security update. 

task can be 

safely Show when: When the need to perform a task is determined and the user is active. 

postponed. Show how often: Once a day for a maximum of three times. 
Annoyance factor: Low, as long as users consider the task important and the notification isn't displayed too often. 
Alternatives: If users must eventually perform the task, use progressive escalation by ultimately displaying a 
modal dialog box when the task becomes mandatory. 

FYI Correct: 

Notifies users of 

potentially 

useful, relevant | This is a notification of a new email message 


information. You v x This pattem can be really annoying if the user 
can notify users 
of information of 


marolnel In this examp! tified wh -Mail ived 
relevance if it is ple, users are notified when a new e-mail message is received. 
optional and 

users opt in. Correct: 


& Windows Live Messenger X 


Jonathan 
has just signed in. 


Options 


2S 10:10am |" 
© 2 12/29/2008 jy) 


In this example, users are notified when contacts come online and they chose to receive this optional information. 


Incorrect: 


@ This device can perform faster os 
This USB device can perform faster if you connectit 
toa high-speed USB 2.0 port. For a list of available 


ports, click here. 


In this example, the information is useful only if the user already has high-speed USB ports installed. Otherwise, 
the user isn't likely to do anything different as the result of it. 


Show when: When the triggering event occurs. 

Show how: Use the real-time option so that these notifications aren't queued when users are running a full- 
screen application or aren't actively using their computer. 

Show how often: Once. 

Annoyance factor: M edium to high, depending upon users' perception of usefulness and relevance. Not 
recommended if there is a low probability of user interest. 


Alternatives: Don't notify users. 
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Feature Don't use notifications for feature advertisements! Instead, use another way to make the feature discoverable, 
advertisement = suchas: 
Notifies users of 


newly installed, . Design the feature to be easier to discover in contexts where it is needed. 
unused system ; 
or application - Don't do anything special and let users discover the feature on their own. 
features. 

Incorrect: 


4) Take a tour of Windows XP x 


To learn about the exciting new features in XP now, click here. 
To take the tour later, click All Programs on the Start menu, 
and then click Accessories. 


Don't use notifications for feature advertisements. 


Guidelines 
General 


- Select the notification pattern based on its usage. For a description of each usage pattern, see the previous table. 


- Don't use any notifications during the initial Windows experience. To improve its first experience, Windows 7 suppresses all 
notifications displayed during the first few hours of usage. Design your program assuming users won't see any such notifications. 


What to notify 


- Don't notify of successful operations, except in the following circumstances: 
o Security. Users consider security operations to be of the highest importance, so notify users of successful security 
operations. 


o Recent failure. Users don't take successful operations for granted if they were failing immediately before, so notify users 
of success when the operation was recently failing. 


o Prevent inconvenience. Report successful operations when doing so might avoid inconveniencing users. Consequently, 
notify users when a successful operation is performed in an unexpected way, such as when an operation is lengthy or 
completes earlier or later than expected. 


- In other circumstances, either give no feedback for success or give feedback "on demand." Assume that users take successful 
operations for granted. You can give feedback on demand by displaying an icon (or changing an existing icon) in the notification 
area while the operation is being performed, and removing the icon (or restoring the previous icon) when the operation is 
complete. 


- For the FYI pattern, don't give a notification if users can continue to work normally or are unlikely to do anything different as 
the result of the notification. 


Incorrect: 


@ This device can perform faster 
This USB device can perform faster if you connectit 
toa high-speed USB 2.0 port. For a list of available 
ports, click here. 


In this example, the information is useful only if the user already has the ports installed. Otherwise, the user isn't 
likely to do anything different as the result of it. 
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o Exception: You can notify users of information of questionable relevance if it is optional and users opt in. 


Correct: 


2 Windo = aeee) Seon x i 


Jonathan 
has just signed in. 


Options 


10:10 AM | 


© i 12/29/2008 


In this example, users are notified when contacts come online and they chose to receive this optional information. 


- For the non-critical system event and FYI patterns, use complete notifications for a single event. Don't present several partial 
ones. 


Incorrect: 


9] Found new hardware A Xx 
General purpose USB device found. 


Found new hardware a Xx 
Microsoft Natural Keyboard Pro found. 


Found new hardware 


Found new hardware 
Your new hardware is installed and ready to use. 


These examples show just four of the eight notifications that were displayed by Windows XP when a user attaches 
a specific USB keyboard, each presenting incrementally more information. 


Correct: 


© 2010, Microsoft Corporation. All rights reserved. Page 392 of 882 


| Installing device driver software “ * 
Click here for status. 


ol Your device isreadytouse “ * 
Device driver software installed successfully. 


In this example, attaching a USB keyboard results in two complete notifications. 
When to notify 


- Display a notification based on its design pattern: 


Pattern When to notify 

Action success Upon completion of an asynchronous task. Notify users of successful actions only if 
they are likely to be waiting for completion, or after recent failures. 

Action failure Upon failure of an asynchronous task. 


Non-critical system event |When an event occurs and the user is active, or the condition continues to exist. If 
this results from a problem, remove the currently displayed notification 
immediately once the problem is resolved. 


Optional user task When the need to perform a task is determined and the user is active. 
FYI When the triggering event occurs. 


- For the action failure pattern, if the problem might correct itself within seconds, delay the failure notification for an appropriate 
amount of time. If the problem corrects itself, report nothing. Notify only after enough time has passed that the failure is 
noticeable. If you report too early, most likely users won't notice the problem reported, but they will notice the unnecessary 
notification. 


Incorrect: 


A Wireless Network Connection 
This connection has limited or no connectivity. 
You might not be able to access the Internet or 


some network resources. For more information, 
click this message. 


When immediately followed by: 


m1 Wireless Network Connection is now connected * 
Connected to: Microsoft Signal Strength: Excellent 


In this example, in Windows Vista the notification of no wireless connectivity is premature because it is often 
immediately followed by a notification of good connectivity. 


- For the action success and FYI patterns, use the real-time option so that stale notifications aren't queued when users are running 
a full-screen application or aren't actively using their computer. 
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- For the non-critical system event pattern, don't create the potential for notification storms by staggering events tied to well- 
known events such as user logon. Instead, tie the event to some time period after the event. For example, you could remind 
users to register your product five minutes after user logon. 


How long to notify 
In Windows Vista and later, notifications are displayed for a fixed duration of 9 seconds. 
How often to notify 


- The number of times to display a notification is based on its design pattern: 


Pattern How often to notify 
Action success Once. 
Action failure Once. 


Non-critical system event |Once when the event first occurs. If this results from a problem that users need to 
solve, redisplay once a day. 


Optional user task Once a day for a maximum of three times. 
FYI Once. 


- For optional user tasks, don't try to pester users into submission by constantly displaying notifications. If the task is required, 
display a modal dialog box immediately instead of using notifications. 


Notification escalation 


- Don't assume that users will see your notifications. Users won't see them when: 
o They are immersed in their work. 


o They aren't paying attention. 

o They are away from their computer. 

o They are running a full-screen application. 

o Their administrator has turned off all notifications for their computer. 


- If users must eventually take some kind of action, use progressive escalation to display an alternative UI that users cannot 
ignore. 


Interaction 


- Make notifications clickable when: 
o Users should perform an action. Clicking the notification should display a window in which users can perform the action. 
This approach is preferred for the action failure and optional user task design patterns. 


o Users may want to see more information. Clicking the notification should display a window in which users can view 
additional information. 


Always display a window when users click to perform an action. Don't have clicking perform an action directly. 


Clicking to show more information should always show more information. Don't just rephrase the information already in the 
notification. 


Icons 


For the action failure pattern, use the standard error icon. 


For the non-critical system event patterns, use the standard warning icon. 


For other patterns, use icons showing objects that relate to or suggest the subject, such as a shield for security or a battery for 
power. 


Use icons based on your application or company branding if your target users will recognize them and there is no better 
alternative. 


For progressive escalation, consider using icons with a progressively more emphatic appearance as the situation becomes more 
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urgent. 


Don't use the standard information icon. That notifications are information goes without saying. 


- Consider using large icons (32x32 pixels) when: 


o Users will quickly comprehend the icon rather than the text. 
o The large icons convey their meaning more clearly and effectively than the standard 16x16 pixel icons. 
o The icon uses the Aero-style. 


Bw View important messages 
9 Click to view messages. 


In this example, users can quickly comprehend the nature of the notification with a glance at the large icon. 


Notification queuing 


Note: Notifications are queued whenever they cannot be displayed immediately, such as when another 
notification is being displayed, the user is running a full-screen application, or the user isn't actively using the 
computer. Real-time notifications remain in the queue for only 60 seconds. 


For the action success and FYI patterns, use the real-time option so that the notification isn't queued for long. These notifications 
have value only when they can be displayed immediately. 


Remove queued notifications when they are no longer relevant. 
Developers: You can do this by setting the NIF_INFO flag in uFlags and set szInfo to an empty string. There is no harm in doing this 
if the notification is no longer in the queue. 


System integration 


Text 


If your application doesn't always have an icon in the notification area when it's running, display an icon temporarily during the 
asynchronous task or event that caused the notification. 


Title text 


Use title text that briefly summarizes the most important information you need to communicate to users in clear, plain, 
concise, specific language. Users should be able to understand the purpose of the notification information quickly and with 
minimal effort. 


Use text fragments or complete sentences without ending punctuation. 
Use sentence-style capitalization. 


Use no more than 48 characters (in English) to accommodate localization. The title has a maximum length of 63 characters, but 
you must allow for 30 percent expansion when the English-language text is translated. 


Body text 


Use body text that gives a description (without repeating the information in the title) and, optionally, that gives specific details 
about the notification, and also lets users know what action is available. 


Use complete sentences with ending punctuation. 
Use sentence-style capitalization. 


Use no more than 200 characters (in English) to accommodate localization. The body text has a maximum length of 255 
characters, but you must allow for 30 percent expansion when the English-language text is translated. 


Include essential information in the body text, such as specific object names. (Examples: user names, file names, or URLs.) Users 
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shouldn't have to open another window to find such information. 


- Put double quotation marks around object names. 
o Exception: Don't use quotation marks when: 
= The object name always uses title-style capitalization, such as with user names. 


= The object name is offset with a colon (example: Printer name: My printer). 
a The object name can be easily determined from the context. 
- If you must truncate object names to a fixed maximum size to accommodate localization, use an ellipsis to indicate truncation. 


a x 


This document was sent to the printer 
Document name: Microsoft Word Notifications... 
Printer name: Shared laser printer 

Time sent: 2:03:14 PM 11/9/2005 

Total pages: 16 


In this example, an object name is truncated using an ellipsis. 


- Use the following phrasing if the notification is actionable: 
> If users can click the notification to perform an action: 
<brief description of essential information> 
<optional details> 
Click to <do something>. 


r) Installing updates... * * 


Click to view progress. 


In this example, users can click to perform an action. 


> If users can click the notification to see more information: 
<brief description of essential information> 
<optional details> 
Click for more information. 


WE Check antivirus status Ms 
9 Fabrikam Antivirus is out of date and must be 
updated manually. Click for more information. 


In this example, users can click for more information. 


- Don't say that the user "must" perform an action in a notification. Notifications are for non-critical information that users can 
freely ignore. If users really must perform an action, don't use notifications. 


- If users should perform an action, make the importance clear. 
- For the action failure and non-critical system event patterns, describe problems in plain language. 


Incorrect: 
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A, Windows Delayed Write Failed hm 
Windows was unable to save all the data for the file 
A: Example.txt. The data has been lost. This error 
may be caused by a failure of your computer 
hardware or network connection. Please try to save 
this file elsewhere. 


In this example, the problem is described using overly technical, yet unspecific language. 


Correct: 


@ Can't write to floppy disk 
Windows couldn't save the file 
A: Example.txt. Reinsert the floppy disk and 


try saving the file again. 


In this example, the problem is described in plain language. 


Describe the event in a way that is relevant to the target users. A notification is relevant if there's a reasonable chance that users 
will perform a task or change their behavior as the result of the notification. You can often accomplish this by describing 
notifications in terms of user goals instead of technological issues. 


Documentation 


When referring to notifications: 


Use the exact title text, including its capitalization. 
Refer to the component as a notification, not as a balloon or an alert. 
To describe user interaction, use click. 


When possible, format the title text using bold text. Otherwise, put the title in quotation marks only if required to prevent 
confusion. 


Example: When the Critical updates are ready to install notification appears, click the notification to start the 
process. 


When referring to the notification area: 


Refer to the notification area as the notification area, not the system tray. 
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Interaction 
These articles provide guidelines for user interaction with your Windows@based applications: 


- Keyboard 

- Mouse and Pointers 
- Touch 

- Pen 

- Accessibility 
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Keyboard 


Design concepts 
Guidelines 
Interaction 
Keyboard navigation 
Access keys 
Menu access keys 
Dialog box access keys 
Shortcut keys 
Choosing shortcut keys 
Choosing shortcut keys (what not to do) 
Keyboard and mouse combinations 
Documentation 
Windows Keyboard Shortcut Keys 


The keyboard is the primary input device used for text input in Microsoft®Windows@® For accessibility and 
efficiency, most actions can be performed using the keyboard as well. 


Keyboards can also refer to virtual, on-screen keyboards and writing pads used by computers without a physical 
keyboard, such as tablet-based computers. 


Home P g U p 
End PgDn 
Del 

Insert 


Func 


Del > 


Enter 


Num | Sym Web 


The Windows Tablet and Touch Technology writing pad. 
There are six basic types of keys: 


- Acharacter key sends a literal character to the window with input focus. 


- Amodifier key combined with another key alters the meaning of its associated key, such as Ctrl, Alt, Shift, and the Windows logo 
key. 


- The navigation keys are the directional arrows, plus Home, End, Page Up, and Page Down. 
- The editing keys are Insert, Backspace, and Delete. 
- The function keys are F1 through F12. 


- System keys put the system into a mode or perform a system task, such as Print Screen, Caps Lock, and Num Lock. 
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Access keys are keys or key combinations used for accessibility to interact with all controls or menu items using 
the keyboard. Shortcut keys are keys or key combinations used by advanced users to perform frequently used 
commands for efficiency. Windows indicates access keys by underlining the access key assignment. 


|File| Edit Format View Help 
Ms Ctrl+N 
Access keys = Ctrl+O 
Ctrl+S 


Save As... 


Page Setup... 
Print... Ctrl+P 


Exit 


This example shows both access keys and shortcut keys. 


To eliminate visual clutter, Windows hides access key underlines by default and displays them only when the Alt 
key is pressed. To maintain consistency with Windows, the images in UX Guide are also shown with the access 
key underlines hidden unless the guideline involves access keys. 


To improve awareness of the access key assignments in your program throughout the development process, you 
can display them at all times. In Control Panel, go to the Ease of Access Center, and click Make the keyboard 
easier to use; then select the Underline keyboard shortcuts and access keys check box. 


Note: Guidelines related to accessibility are presented in a separate article. 


Design concepts 
Elements of keyboard navigation 


Users interact with a window using the keyboard by navigating to controls, making selections, and performing 
commands. The following elements work together to make this happen. 
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Edit Colors 


To illustrate the elements of keyboard navigation in the following list, we'll refer to this dialog box. 


- Input focus. The control with input focus receives most keyboard input. Input focus is indicated with a dotted rectangle called the 
focus rectangle. Some keyboard input is sent to controls that don't have input focus, as explained later. 


on 
ae 


The first Basic colors control has input focus, as indicated with a dotted rectangle. 


- Tab key and tab stops. The Tab key is the primary mechanism for navigating within a window. The Tab key visits only those 


controls with a tab stop. All interactive controls should have tab stops (unless they are in a group), whereas non-interactive 
controls, such as labels, should not. 


- Tab order. All controls with tab stops are visited in tab order. Pressing Tab moves input focus to the next control in tab order, 
whereas pressing Shift+Tab moves input focus to the previous control. 


- Control groups. A set of related controls can be made into a group and be assigned a single tab stop. Control groups are used for 


sets of controls that behave like a single control, such as radio buttons. They can also be used when there too many controls to 
navigate efficiently with the Tab key alone. 


Custom colors: 


| i_it_is_|p i it _| 
BEE fs) es) 
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Basic colors and Custom colors are control groups, giving this dialog box five tab stops. There are so many controls 
that navigation would be inefficient without using control groups. 


Arrow keys. The arrow keys move input focus among the controls within a group. Pressing the right arrow key moves input focus 
to the next control in tab order, whereas pressing the left arrow moves input focus to the previous control. Home, End, Up, and 
Down also have their expected behavior within a group. Users can't navigate out of a control group using arrow keys. 


Default buttons. Windows with command buttons and command links have a single default button indicated by a highlighted 
border, which is the button that is clicked when the Enter key is pressed. There is a single default command button or command 
link assigned by default. However, the default button moves when the user tabs to another command button or command link. 
Consequently, any command button or command link with input focus is also always the default button. 


The OK button is normally the default button, as indicated by its highlighted border. However, if the user were to 
tab to the Cancel button, it would become the default button and would be activated with the Enter key. 


Spacebar, Enter, and Esc keys. The spacebar activates the control with input focus, whereas the Enter key activates the default 
button. Pressing the Esc key cancels or closes the window. 


Access keys. Access keys are used to interact with controls directly instead of navigating with Tab. They are combined with the 
Alt key and indicated with an underlined letter in their label. 


Access key labels. While some controls contain their own labels, such as command buttons, check boxes, and radio buttons, 
other controls have external labels, such as list boxes and tree views. For external labels, the access key is assigned to the label, 
and if invoked, navigates to the next control in tab order. Buttons labeled OK, Cancel, and Close aren't assigned access keys 
because they are invoked with Enter and Esc. 


Basic colors: 
mest tee Fis 


| Define custom colors >> 


Pressing Alt+B navigates to the selected basic color, pressing Alt+D clicks the Define Custom Colors button, Enter 
invokes the OK button, and Esc invokes Cancel. 


Access key behavior. When an access key is invoked and it is assigned uniquely, the associated control is clicked. If the 
assignment isn't unique, the associated control is given input focus. If the user types the same access key again, the next control 
in tab order with the same assignment is given input focus. 


While this mechanism is fairly complicated, it is also fairly intuitive. Users pick up most these details right away, 
even though few can explain exactly how they work. 


Keyboard support for accessibility and advanced users 


In Windows, designing for the keyboard boils down to providing well-designed keyboard navigation, access 
keys for accessibility, and shortcut keys for advanced users. 


To ensure that your program's functionality is easily available to the widest range of users, including those who 
have disabilities and impairments, all interactive user interface (UI) elements must be keyboard accessible. 
Generally, this means that the most commonly used UI elements are accessible using a single access key or key 
combination, whereas less frequently used elements may require additional tab or arrow key navigation. For 
these users, comprehensiveness is more important than consistency. 


To ensure that your program's functionality is efficient for experienced users, commonly used UI elements should 
also have shortcut keys for direct keyboard access. Experienced users often have a strong preference for using 
the keyboard, because keyboard-based commands can be entered more quickly and don't require removing their 
hands from the keyboard. For these users, efficiency and consistency are crucial; comprehensiveness is important 
only for the most frequently used commands. 
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There are subtle distinctions when designing keyboard access for these two groups, which is why Windows 
provides two independent direct keyboard access mechanisms. By using both access and shortcut keys 
effectively, you can give your programs efficient, consistent, comprehensive keyboard access that benefits 
everyone. 


Access keys 


Access keys have the following characteristics: 


They use the Alt key plus an alphanumeric key. 


They are primarily for accessibility. 


They are assigned to all menus and most dialog box controls. 


They aren't intended to be memorized, so they are documented directly in the UI by underlining the corresponding control label 
character. 


They have effect only in the current window, and navigate to the corresponding menu item or control. 


They aren't assigned consistently because they can't always be. However, access keys should be assigned consistently for 
commonly used commands, especially commit buttons. 


They are localized. 


Because access keys aren't intended to be memorized, they are assigned to a character that is early in the label 
to make them easy to find, even if there is a keyword that appears later in the label. 


Correct: 


@ Don't use automatic leaming, and delete any previously 
collected data 


Incorrect: 


@) Don't use automatic leaming, and delete any previously 
collected data 


In the correct example, the access key is assigned to a character that is early in the label. 
Shortcut keys 
By contrast, shortcut keys have the following characteristics: 


They primarily use Ctrl and Function key sequences (Windows system shortcut keys also use Alt+non-alphanumeric keys and the 
Windows logo key). 


They are primarily for efficiency for advanced users. 


They are assigned only to the most commonly used commands. 


They are intended to be memorized, and are documented only in menus, tooltips, and Help. 
They have effect throughout the entire program, but have no effect if they don't apply. 


They must be assigned consistently because they are memorized and not directly documented. 


They aren't localized. 


Because shortcut keys are intended to be memorized, the most frequently used shortcut keys ideally use 
letters from the first or most memorable characters within the command's keywords, such as Ctrl+C for Copy 
and Ctrl+Q for Request. 


Inconsistent meanings for well-known shortcut keys are frustrating and cause errors. 


Incorrect: 
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LS 


Forward (Ctrl+F) 


In this example, Ctrl+F is the standard shortcut for Find, so assigning it to Forward is frustrating and error prone. 
Ctrl+W would be a better, memorable choice. 


Finally, because they are intended to be memorized, application-specific shortcut keys make sense only for 
programs and features that are run frequently enough for motivated users to memorize. Infrequently used 
programs and features don't need shortcut keys. For example, setup programs and most wizards don't need any 
special shortcut key assignments, nor do infrequently used commands in a productivity application. 


Assigning access keys in dialog boxes 


Whenever possible, assign unique access keys to all interactive controls except those that normally aren't 
assigned access keys. However, in English there are only 26 characters. Some characters may not appear in any 
of the labels, and there may not be distinctive characters in all the labels, reducing this number further. Also, you 
should plan to have a few unassigned characters to facilitate localization. Consequently, you can assign only 
about 20 unique access keys in a single dialog box. 


If you have a dialog box with more than 20 interactive controls, either don't assign access keys to some controls, 
or, in rare situations, assign duplicate access keys. 


Underline color: 


Automatic 


Small caps 
All caps 


Preview 
es Segoe UI es 


This is a TrueType font. This font will be used on both printer and screen. 


Lox) [_concet_] 


When there are this many interactive controls, not all of them need an access key assigned. 
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Use the following general procedure to assign access keys: 


- First, assign access keys to the commit buttons and command links. Use the standard access key assignments table when it 
applies, otherwise use the first letter of the first word. 


- Skip the controls that aren't assigned access keys. 


- Assign unique access keys to the remaining controls (starting with the most frequently used): 
o If possible, assign the access key according to the standard access key assignments table. 


o Otherwise: 
= Prefer characters that appear early in the label, ideally the first character of the first or second word. 


a Prefer a distinctive consonant or a vowel, such as "x" in "Exit." 
= Prefer characters with wide widths, as w, m, and capital letters. 


» Avoid using characters that make the underline difficult to see, such as letters that are one pixel wide, letters with 
descenders, and letters next to a letter with a descender. 


- If not all controls can have unique access keys (start with the least frequently used): 
o If there are groups of related controls, such as: 
» Asingle set of radio buttons 


= ASet of related check boxes 
= Aset of related controls within a group box 


assign access keys to group labels instead of the individual controls. Normally, you would do the opposite. (In doing so, 
make sure there is a control group defined for these controls.) 


+ If still not all controls can have unique access keys: 
o You may assign non-unique access keys if: 
= The controls would otherwise be too difficult to navigate to. 


= The non-unique access keys don't conflict with the access keys of commonly used controls. 
o Otherwise, the remaining controls can be accessed using Tab and arrow key navigation. 


we Change Key Sequence 


Switch input language Switch keyboard layout 
© Not assigned © Not assigned 

>) Ctrl + Shift @ Ctrl + Shift 

@ Left Alt + Shift >) Left Alt + Shift 


© Grave accent (*) >) Grave accent (*) 


In this example, there are repetitive controls so access keys are assigned to the radio button groups. 


Preventing accidental commands 

If a window displayed out of context (not user initiated) steals input focus, there is a good chance that this 
window will receive input intended for another window. Furthermore, access keys take effect when pressed 
without depressing the Alt key if the dialog box doesn't have any controls that take text input (such as text boxes 
and lists). So, in the following example, pressing "r" activates the Restart now button. 

Clearly, such input may have significant unintended consequences. 


Incorrect: 
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Microsoft Windows 


You must restart your computer to apply these 
changes 


Before restarting, save any open files and close all programs. 


Retatnon 


In this example, typing text with space, "r", or Enter accidentally restarts Windows. 


Of course, the best solution to this problem is not to steal input focus. Instead, either flash the program's taskbar 
button or display a notification to get the user's attention. 


However, if you must display such a window, the best approach is to not assign a default button or access keys, 
and give initial input focus to a control other than a commit button. 


Correct: 
Microsoft Windows 


You must restart your computer to apply these 
changes 


Before restarting, save any open files and close all programs. 


Restartnow 


In this example, accidentally restarting Windows is much harder to do. 


If you do only six things... 

1. Design good keyboard navigation, with a sensible tab order and appropriate control groups, initial input focus, 
and default buttons. 

2. Assign access keys to all menus and most controls. 

3. Assign the access keys to a character that appears early in the label, to make them easy to find. 

4. Assign shortcut keys to the most commonly used commands. 

5. Try to assign the shortcut keys to the first or most memorable characters within keywords. 

6. Give well-known shortcut keys a consistent meaning. 


Guidelines 


Interaction 


- Don't use the Shift key to modify commands in menus or dialog boxes. Doing so is undiscoverable and unexpected. 


Incorrect: 
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Confirm Folder Replace 


This Folder already contains a folder named ‘music’. 
If the files in the existing Folder have the same name as files in the 


folder you are moving or copying, they will be replaced, Do you still 
want to move or copy the folder? 


In this example from Windows XP, holding the Shift key replaces Yes to All with No to All. 


- Don't disable a control with input focus. Doing so may prevent the window from receiving keyboard input. Instead, before 
disabling a control with input focus, move input focus to another control. 


- Ifa window is displayed out of context, potentially surprising users, you may need to prevent significant unintended 
consequences: 
o Don't assign a default button. 


o Don't assign access keys. 
o Give initial input focus to a control other than a commit button. 


Keyboard navigation 


- Always show the input focus indicator. Exception: You can temporarily suppress the input focus indicator if: 
o The input focus indicator is visually distracting (as with a large list view not in Details view). 


o The Enter key's usage is likely preceded by other keyboard input, such as Alt or arrow keys. 
o The input focus indicator is displayed upon any keyboard input. 


Assign initial input focus to the control that users are most likely to interact with first, which is often the first interactive 
control. If the first interactive control isn't a good choice, consider changing the window's layout. 


Assign tabs stops to all interactive controls, including read-only edit boxes. Exceptions: 
o Group sets of related controls that behave as a single control, such as radio buttons. Such groups have a single tab stop. 


o Properly contain groups so that the arrow keys cycle both forward and backward within the group and stay within the 
group. 
Tab order should follow reading order, which generally flows from left to right, top to bottom. Consider making exceptions for 
commonly used controls by putting them earlier in the tab order. Tab should cycle through all the tab stops in both directions 
without stopping. 


Within a tab stop, the arrow key order should flow from left to right, top to bottom, without exceptions. The arrow keys should 
cycle through all items in both directions without stopping. 


Present the commit buttons in the following order: 
o OK/[Do it]/Yes 


o [Don't do it]/No 
o Cancel 


o Apply (if present) 
where [Do it] and [Don't do it] are specific responses to the main instruction. 


Select the safest (to prevent loss of data or system access) and most secure command button or command link to be the 
default. If safety and security aren't factors, select the most likely or convenient response. 


Keyboard navigation shouldn't change control values or result in an error message. Never require users to change a control's 
initial value during navigation. Instead, initialize controls that validate on exit with valid values, and validate a control's value only 
when it has changed. 


Access keys 


- Whenever possible, assign access keys for commonly used commands according to the following table. While consistent access 
key assignments aren't always possible, they are certainly preferred—especially for frequently used commands. 
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[Accesskey [Command 
About 
Always on top 

Apply 
ak 
[Browse 
cory 
[Create shortcut 
[Create shortcuthere 
—e 
et 
[Explore 


Fewer 


iil 


ies] 


We 


WN 


Findnext 


Move here 


lh 


Open with 
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|Paste link 
[Paste shortcut 
Paste specal SSS 
Pay 
[Print here 
Properties == SSCS 
Redo 
Repeat == SS 
Resume 
Retry 


— 
— 
nz 


il 


uv 


i 


po) 


saveas 
Select all 

[Send to 
stop 
fools 
|Underline 
undo 
View 
Window SSS 


- Prefer characters with wide widths, such as w, m, and capital letters. 


WM!) WW) a 


xe} 


| 


un 


< 
a>) 
1?) 


- Prefer a distinctive consonant or a vowel, such as "x" in "Exit." 


- Avoid using characters that make the underline difficult to see, such as (from most problematic to least problematic): 
o Characters that are only one pixel wide, such asi and |. 


o Characters with descenders, such as g, j, p, g, and y. 

o Characters next to a letter with a descender. 
- When assigning access keys in wizard pages, remember to reserve "B" for Back and "N" for Next. 
- When assigning access keys in property pages, remember to reserve "A" for Apply, if used. 


Menu access keys 


- Assign access keys to all menu items. No exceptions. 
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- For dynamic menu items (such as recently used files), assign access keys numerically. 


1 Sun with Moon.png bs 
2 Truck and Car.png 

3 Tree.png 

4 Work Friends.png 


Exit Alt+F4 


In this example, the Paint program in Windows assigns numeric access keys to recently used files. 


- Assign unique access keys within a menu level. You can reuse access keys across different menu levels. 


- Make access keys easy to find: 
o For the most frequently used menu items, choose characters at the beginning of the first or second word of the label, 
preferably the first character. 


o For less frequently used menu items, choose letters that are a distinctive consonant or a vowel in the label. 
Dialog box access keys 
- Whenever possible, assign unique access keys to all interactive controls or their labels. Read-only text boxes are interactive 
controls (because users can scroll them and copy text), so they benefit from access keys. Don't assign access keys to: 


o OK, Cancel, and Close buttons. Enter and Esc are used for their access keys. However, always assign an access key to a 
control that means OK or Cancel, but has a different label. 


Delete File 


Are you sure you want to move this file to the Recycle Bin? 


UXGuide 

Type: Text Document 

Size: 14.8 KB 

Date modified: 4/26/2007 12:50 AM 


In this example, the positive commit button has an access key assigned. 


Group labels. Normally, the individual controls within a group are assigned access keys, so the group label doesn't need 
one. However, assign an access key to the group label and not the individual controls if there is a shortage of access keys. 


ie) 


Generic Help buttons, which are accessed with F1. 


ie) 


Link labels. There are often too many links to assign unique access keys, and link underscores hide the access key 
underscores. Have users access links with the Tab key instead. 


Tab names. Tabs are cycled using Ctrl+Tab and Ctrl+Shift+Tab. 
Browse buttons labeled "...". These can't be assigned access keys uniquely. 


1o) 


1o) 


ie) 


Unlabeled controls, such as spin controls, graphic command buttons, and unlabeled progressive disclosure controls. 


ie) 


Non-label static text or labels for controls that aren't interactive, such as progress bars. 


eo) 
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Assign commit button access keys first to ensure that they have the standard key assignments. If there isn't a standard key 
assignment, use the first letter of the first word. For example, the access key for Yes and No commit buttons should always be "Y" 
and "N", regardless of the other controls in the dialog box. 


For negative commit buttons (other than Cancel) phrased as a "Don't", assign the access key to the "n" in "Don't". If not 
phrased as a "Don't", use the standard access key assignment or assign the first letter of the first word. By doing so, all Don'ts and 
No's have a consistent access key. 


To make access keys easy to find, assign the access keys to a character that appears early in the label, ideally the first character, 
even if there is a keyword that appears later in the label. 


Assign at most 20 access keys, so you have a few unassigned characters to facilitate localization. 


If there are too many interactive controls to assign unique access keys, you may assign non-unique access keys if: 
o The controls would otherwise be too difficult to navigate to. 


o The non-unique access keys don't conflict with the access keys of commonly used controls. 


Don't use menu bars in dialog boxes. It's difficult to assign unique access keys in this case, because the dialog box controls and 
menu items share the same characters. 


Shortcut keys 


Assign shortcut keys to the most commonly used commands. Infrequently used programs and features don't need shortcut keys 
because users can use access keys instead. 


Don't make a shortcut key the only way to perform a task. Users should also be able to use the mouse or the keyboard with Tab, 
arrow, and access keys. 

Don't assign different meanings to well-known shortcut keys. Because they are memorized, inconsistent meanings for well- 
known shortcuts are frustrating and error prone. For the well-known shortcut keys used by Windows programs, see Windows 
Keyboard Shortcut Keys. 


Don't try to assign system-wide program shortcut keys. Your program's shortcut keys will have effect only when your program 
has input focus. 


Document all shortcut keys. Document shortcuts in menu bar items, toolbar tooltips, and a single Help article that documents all 
shortcut keys used. Doing so helps users learn the shortcut key assignments—they shouldn't be a secret. 
o Exception: Don't display shortcut key assignments within context menus. Context menus don't display the shortcut key 
assignments because these menus are optimized for efficiency. 


~ U ~ abe x, x Aay||7~ A~ 


Bold (Ctri+B) 


Make the selected text bold. 


The shortcut key is documented in the tooltip. 


If your program assigns many shortcut keys, provide the ability to customize the assignments. Doing so allows users to reassign 
conflicting shortcut keys and migrate from other products. Most programs don't assign enough shortcut keys to need this feature. 


Choosing shortcut keys 


- For well-known shortcut keys, use the standard assignments. For the well-known shortcut keys used by Windows programs, see 
Windows Keyboard Shortcut Keys. 


- For non-standard key assignments, use the following recommended shortcut keys for more frequently used commands. These 
shortcut keys are recommended because they don't conflict with the well-known shortcuts and are easy to press. 
o Ctrl4+G,J,K,LM,Q, R, or T 


o Ctrl-+any number 
o F7, F8, F9, or F12 
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o Shift+F2, F3, F4, F5, F7, F8, F9, F11, or F12 
o Alt+any function key except F4 


Use the following recommended shortcut keys for less frequently used commands. These shortcut keys don't have conflicts, but 
are harder to press—often requiring two hands. 
o Ctrl+any function key except F4 and F6 


o Ctrl+Shifttany letter or number 


Make frequently used shortcut keys easy to remember: 
o Use letters instead of numbers or function keys. 


o Try to use a letter that is in the first word or most memorable character within the command's keywords. 


Use function keys for commands that have a small-scale effect, such as commands that apply to the selected object. For 
example, F2 renames the selected item. 


Use Ctrl key combinations for commands that have a large-scale effect, such as commands that apply to an entire document. 
For example, Ctrl+S saves the current document. 


Use Shift key combinations for commands that extend or complement the actions of the standard shortcut key. For example, 
the Alt+Tab shortcut key cycles through open primary windows, whereas Alt+Shift+Tab cycles in the reverse order. Similarly, F1 
displays Help, whereas Shift+F1 displays context-sensitive Help. 


When using arrow keys to move or resize an item, use Ctrit+arrow keys for more granular control. 


Choosing shortcut keys (what not to do) 


Don't distinguish between key locations. For example, Windows can distinguish between left and right Shift, Alt, Ctrl, Windows 
logo, and Application keys, as well as keys on the numeric keypad. Assigning behavior to only one key location is confusing and 
unexpected. 


Don't use the Windows logo modifier key for program shortcut keys. Windows logo key is reserved for Windows use. Even if a 
Windows logo key combination isn't being used by Windows now, it may be in the future. 


Don't use the Application key as a shortcut key modifier. Use Ctrl, Alt, and Shift instead. 


Don't use shortcut keys used by Windows for program shortcut keys. Doing so will conflict with the Windows system shortcut 
keys when your program has input focus. For the shortcut keys used by Windows, see Windows Keyboard Shortcut Keys. 


Don't use Alt+alphanumeric key combinations for shortcut keys. Such shortcut keys may conflict with access keys. 


Don't use the following characters for shortcut keys: @ Af $ $[]\ ~| *' <>. These characters require different key 
combinations across languages or are locale specific. 


Avoid complex key combinations, such as three or more keys together (example: Ctrl+Alt+spacebar) or keys that are far apart on 
the keyboard (example: Ctrl+F5). Use simple shortcut keys for frequently used commands. 


Don't use Ctrl+Alt combinations, because Windows interprets this combination in some language versions as an AItGR key, which 
generates alphanumeric characters. 


Keyboard and mouse combinations 


For links, use Shift+click to navigate using a new window and Ctrl+click to navigate using a new tab. This approach is consistent 
with Windows Internet Explorer® 


Documentation 


When referring to the keyboard: 


Use on-screen keyboard to refer to a keyboard representation on the screen that the user touches to input characters. 


Give keyboard combinations starting with the modifier key. Present modifier keys in the following order: Windows logo, 
Application, Ctrl, Alt, Shift. If the Numpad modifier is used, put that just before the key it modifies. 


Don't use all capital letters for keyboard keys. Instead, follow the capitalization used by standard keyboards, or lowercase if the 
key is not labeled on the keyboard. 
o For alphabetical key combinations, use an uppercase letter. 


o Spell out Page Up, Page Down, Print Screen, and Scroll Lock. 
o Spell out plus sign, minus sign, hyphen, period, and comma. 
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o For arrow keys, use left arrow, right arrow, up arrow, and down arrow. Don't use graphic labels for the arrow keys. 
o Use Windows logo key and Application key to refer to the keys labeled with icons. Don't use graphic labels for these keys. 


Correct: 
spacebar, Tab, Enter, Page Up, Ctrl+Alt+Del, Alt+W, Ctrltplus sign 


Incorrect: 
SPACEBAR, TAB, ENTER, PG UP, Ctrl+Alt+DEL, Alt+w, Ctrl-+ 


Indicate key combinations with a plus sign, without spaces. 


Correct: 
Ctri+A, Shift+F5 


Incorrect: 
Ctrl-A, Shift +F5 


To show a key combination that includes punctuation that requires use of the Shift key, such as the question mark, add Shift to 
the combination and give the name or symbol of the shifted key. Using the name of the unshifted key, such as 4 rather than $, 
could be confusing to users or even wrong; for instance, the ? and / characters are not always shifted keys on every keyboard. 


Correct: 
Ctrl+Shift+?, Ctrl+Shift+*, Ctrl+Shift+comma 


Incorrect: 
Ctrl+Shift+/, Ctri+?, Ctrl+Shift+8, Ctrl+* 


At first mention, use the and key with the key name if necessary for clarity—for example, the F1 key. At all subsequent 
references, refer to the key only by its name—for example, press F1. 


Refer specifically to access keys and shortcut keys in programming and other technical documentation. Don't use accelerator, 
mnemonic, or hot keys. Everywhere else use keyboard shortcut, especially in user documentation. 


When referring to interaction: 


Use press, not depress, strike, hit, or type, when pressing and immediately releasing a key initiates an action within the program 
or navigates within a document or UI. 


Use type, not enter, to direct users to type text. 


Use use in situations when press might be confusing, such as when referring to a type of key such as the arrow keys or function 
keys. In such cases, press might make users think they need to press all the keys simultaneously. 


Use hold when pressing and holding a key, such as a modifier key. 
Don't use press as a synonym for click. 


Examples: 


Type your name, and then press Enter. 

Press Ctrl+F, and then type the text you want to search for. 
To save your file, press Y. 

To move the insertion point, use the arrow keys. 
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Windows Keyboard Shortcut Keys 


Keyboard 


The following tables summarize the standard Microsoft ®Windows®shortcut key assignments. 
The following shortcuts can be used by any program, but they must have the given meaning: 


General shortcuts 


Key (Meaning 
Fl [Display context-sensitive Help, 
ShiftHL Display context-sensitive Help (same as F1). 

F10 [Activate the menu bar inthe active program. 
‘Alt+enter =‘ Display the Properties dialog boxfortheselecteditem. = 
Ctra Select all 
(Ctriax, CtriaDelete =u 

[Ctrl4Y, Alt+Shift+Backspace [Redo, 
(Ctrl4Z, AltsBackspace = [Undo, 
(Ctr4f = lOpenthe Find dialog box, 
(CtrtH = Open theReplacedialogbox, 
(Ctrl4N Open anew blankdocument orthe New dialogbox. 
Ctrl4O = Openthe Opendialogbox, 
Ctr4p  lOpenthe Printdialogbox, 
(Ctrl4$ Save the active document (normally without opening the Save As dialog box). 
[shift+#10 == Display the context menu for the selected item. 


Text formatting shortcuts 


Key Meaning: 
(CtsB Bo 
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The following shortcuts are standard for Windows controls. Custom controls should use shortcuts consistently. 


List view shortcuts 


Key Meaning 
End [Select last item, 


Ctrl+End IM ove focus to last item without selecting. 
Ctrl+Arrow keys+spacebar [Allow discontinuous multiple selection of items. 


Any printable key or keys Moves the selection to the item matching prefix letters in the 
beginning of the label. 


Ctrl+ShiftHeft arrow, Ctrl+Shifttright arrow [Change the column width. 


Tree view shortcuts 


Asterisk (*) on numeric keypad __| Display all sub-items under the selected item. 
Plus sign (+) on numeric keypad __| Display the sub-items directly under the selected item. 
Minus sign (-) on numeric keypad |Collapse the items directly under the selected item group. 


left arrow Collapse the current selection (if it is expanded) and move focus to the 
group leaf root. 


right arrow Display the sub-items directly under the selected item (if it is collapsed). 

AltHeft arrow = |View thepreviousgroup. 
[Altright arrow = |View thennext group, 
(Ctrtdown arrow = «Scroll the view without change of the selection. = 


Any printable key or keys Moves the selection to the item matching prefix letters in the beginning of 
label. 


Search box shortcuts 


‘Alt+Enter S| Search for entered term usinglocal search. 


Other control shortcuts 


F4, Alt+down arrow, Alt+tup arrow Display or hide the items in the active drop-down list or combo box. | 
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(Ctrl+Tab, Ctrl4PageDown = |Cyclethroughthe tabcontrols, 
(Ctrl+Shift-+Tab, Ctrl4PageUp [Reverse cycle through thetab control, = 
‘Alt+Shift4up arrow = [Move selecteditemup, 
‘Alt+Shift+down arrow Ss [Move selecteditemdown, 


The following shortcuts are reserved for use by Windows: 


Windows shortcuts 


Key Meaning: 
Alt [Activate orinactivatethe menubar, 
Alttesc = Cycle through itemsin the order they were opened. = 
‘AltsShift+Esc == Cycle through items in the reverse order they were opened. 


(aia) Display context menu for the active child window (multiple-document 
interface [M DI] application). 

‘Applicationkey = =—*(| Display the context menufortheselecteditem. = 
\Alt+Print Screen SS «| Copy the active window image tothe clipboard. = 
‘Alt+spacebar = ——S—SCSCS*=«d Display the system menuforrthe active window. = 
AltTab = Cycle through open primarywindows, 
[AltsshiftsTa> == Reverse cycle through open primarywindows. 
Ctrtltfab == Cycle through open primary windows without closing the menu. 
(Ctrl+altsshift+Tab =| Reverse cycle through open primary windows without closing the menu. 
Ctrtess = Display the Startmenu, 
(Ctritalt+Delete SSS‘ Display the Windowssecurity screen, 
[Shift-+<click program on taskbar> Launch the program. (Windows 7) 


Navigation shortcuts 


[7 [Close the active window or program. the active window or [Close the active window or program. 

ee Close the active document (in programs that allow you to have multiple documents 
open). 

[Ctrl+Tab,F6 F6 Moves to next [Moves to next pane or palette withina program. or [Moves to next pane or palette withina program. within a program. 
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[Ctrl+Shift-Tab, Shift+F6- Shift+F6 |Moves to [Moves to previous pane or palette withina program. pane or [Moves to previous pane or palette withina program. within a program. 


one Moves to next window in a group of related windows (or between MDI document 
windows). 

Ctrl+Shift-+F6 M oves to previous window in a group of related windows (or between M DI document 
windows). 


Windows key shortcuts 


Windowslogokey  =———Ss«SDiisplayorhidethe Startmenu, 
[Windows logo keyHeft arrow Dock active window to left half of screen (Windows 7) 

Windows logo key-+right arrow = Dock active window to right half of screen (Windows 7) 

[Windows logo key+up arrow Maximize active window (Windows 7) 

[Windows logo key+down arrow Restore/minimize active window (Windows 7) 

Windows logo key+Shift+up arrow Maximize active window vertically, maintaining width (Windows 7) 


Windows logo key+Shift+down arrow Restore/minimize active window vertically, maintaining width 
(Windows 7) 


Windows logo key+Shift Heft arrow M ove window to monitor on the left. (Windows 7) 
Windows logo key+Shift+right arrow M ove window to monitor on the right. (Windows 7) 
Windows logo key+spacebar Temporarily peek at the desktop. (Windows 7) 


Windows logo key+? Display projection options. Use arrow keys to select option. 
(Windows 7) 


Windows logo key+T M ove focus to taskbar. (Windows 7) 


Windows logo key+Home Minimize all non-active windows (restore on second keystroke). 
(Windows 7) 


Launch a new instance of the program located at the given position 
on the taskbar (Windows 7) or Quick Launch (Windows Vista). 
(Example: Windows logo key+1 to launch first program.) 


Windowslogokey+B  -——~*S~*«S Set fovcusiin the notification area, 
Windows logo key+Break (Display the System Propertiesdialogbox. = 
[Windowslogokey#D Show the desktop (restore on second keystroke). 
Windowslogokey+E = ——S*«WC pen Windows Explorer navigated to Computer, = 
[Windowslogo key+Ctr#F Search for computers (if you are on a network). 
Windowslogokey+G = SS «(Cycle through Windows DesktopGadgets. = 
ee | Lock your computer (if you're connected to a network domain), or 
switch users (if you're not connected to a network domain). 
Windowslogokey#R === [OpentheRundialogbox, 
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Windows logo key+<number> 


Windows logo key+spacebar Bring Windows Desktop Gadgets to the front. 
Windows logo key+T Set focus on the taskbar and cycle through programs. 
Windows logo key+Tab Cycle through programs on the taskbar by using Windows Flip 3D. 


Windows logo key+Shift+Tab Reverse cycle through programs on the taskbar by using Windows 
Flip 3D. 

Windows logo key+Ctrl+Tab Use the arrow keys to cycle through programs on the taskbar by 
using Windows Flip 3D. 


[Windows logokey¥J sss OpenEaseofAccessCenter, 
Windowslogokey+X ———S—Ss«*(O pen Windows MobilityCenter, = 


Accessibility shortcuts 


[Left Alt-Heft Shift+Print Screen =| Toggle High Contraston andoff. = 
[Left AltHeft ShifttNum Lock = Toggle MouseKeysonandoff; 


The following shortcuts can be used by any program, but they should have a consistent meaning: 


Windows Explorer shortcuts 


Key Meaning =S=SOSOS~*~<“<=CS~*S*S*S 
ato ~~~-*‘[SelecttheAddressbar. =*~*~*~“‘~*‘*‘*~* 


Shift+Delete Delete the selected item without moving it to the Recycle 
Bin. 


Ctrl+N Opens current location in a new window. 
Ctrl+Shift while dragging an item Create shortcut to selected item. 
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Left Alt+Shift Switch input languages or keyboard layouts (available and 
configurable when the user installed multiple keyboard 


layouts). 


Ctrl+Shift Switch keyboard layouts or input languages (available and 
configurable when the user installed multiple keyboard 


layouts). 


Ctrl or left Alt+Shiftt+~, number (0~9), or grave 
accent key 


Shortcut key for input languages (available and 
configurable when the user installed multiple keyboard 
layouts). 


Esc Cancel the current task or search. 


Windows Internet Explorer®shortcuts 


General shortcuts 


Key Mening  =2=~SOSOC~C~C<=<“~*“‘“‘“‘S*SOSSSSSSSS 
FIL Alteenter |TurnFullScreenModeonoroffi. —=~S*“‘<=<~*~*‘“‘<=<S*” 
(C0 ——-(Zoomtol00percent. ~=~*~S*<“‘i<i=<*<CSCSt*”*S*”S 
Tab ‘Cycle through the Address Bar, Refresh button, Search box, and items on aWeb page. 


Navigation shortcuts 


FS Refresh page, 
(Ctr4f5 = Refreshpageandthecache, 
AlttHome == Gotohomepage, 
[AltHeft arrow = (Go backward, 
‘Alt+right arrow (Go forward, 
Esc [Stopdownloadingpage, 


Favorites Center shortcuts 


Ctrl+B /Organize Favorites. 
Ctrl+D |Add current page to Favorites. 
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(CtrltH = Open History, 
[Ctrisshift+H = |OpenHistoryinpinnedmode. 
(CtrlH = pen Favorites, 
(Ctrl+ShiftH == OpenFavoritesinpinnedmode, 
ctype Feeds, 
[Ctrisshifty = Open Feedsinpinnedmode, 


Tab shortcuts 


(CtrlHeft mouse button =———[Opentinkinnewbackgroundtab. 
(Ctrl+ShiftHeft mouse button [Opentinkinnewforegroundtab. 
[Ctrl+F4, Ctr Close tab (closes window if only one tab is open). 

ctr+Q. [pen Quick Tab view that displays thumbnails of the tabs. 
(CtrlsT  pennewtab, 
(Ctrlsshift+Q = [Viewlistofopentabs, 


Address bar shortcuts 


tw [SelecttheAddressbar. =*~*~*<“‘<=~*~*‘“‘<*S*‘“‘<CSCS*”*:*”S 
[GrisEnter |Add http:/Twwws." to the begining and com* tothe end oftedin Addressbar. 


Ctrl+Shift+Enter |Add "http://www." to the beginning and the Web site address suffix you have specified to 
the end of text in the Address bar. 


Search bar shortcuts 


Alt+énter Open search results in new tab. 
Ctrl+down arrow View list of search providers. 
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Mouse and Pointers 


Design concepts 

Guidelines 
Click affordance 
Standard mouse button interactions 
Mouse interaction 
Mouse wheel 
Hiding the pointer 
Activity pointers 
Caret 
Accessibility 

Documentation 


The mouse is the primary input device used to interact with objects in Microsoft ®@W indows@ The term mouse 
can also refer to other pointing devices, such as trackballs, touchpads and pointing sticks built into notebook 
computers, pens used with Windows Tablet and Touch Technology, and, on computers with touchscreens, even a 
user's finger. 


Physically moving the mouse moves the graphic pointer (also referred to as the cursor) on the screen. The pointer 
has a variety of shapes to indicate its current behavior. 


be & I nO ) 
Typical mouse pointers. 


A modern mouse typically has a primary button (usually the left button), a secondary button (usually the right), 
and a mouse wheel between the two. By positioning the pointer and clicking the primary and secondary buttons 
on the mouse, users can select objects and perform actions on them. For most interactions, pressing a mouse 
button indicates the selected target, and releasing the button performs the action. 
All pointers except the busy pointer have a single pixel hot spot that defines the exact screen location of the 
mouse. The hot spot determines which object is affected by mouse actions. Objects define a hot zone, which is 
the area where the hot spot is considered to be over the object. Typically, the hot zone coincides with the 
borders of an object, but it may be larger to make user interaction easier. 
The caret is the flashing vertical bar that is displayed when the user is typing into a text box or other text editor. 
The caret is independent of the pointer; by default, Windows hides the pointer while the user is typing. 

File name: UXGuide| ¥ 


The caret. 


Note: Guidelines related to accessibility and touch are presented in a separate article. 


Design concepts 


The mouse is intuitive 
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The mouse has been a successful input device because it is easy to use for the typical human hand. Pointer-based 
interaction has been successful because it is intuitive and allows for a rich variety of experiences. 


Well-designed user interface (UI) objects are said to have affordance, which are visual and behavioral 
properties of an object that suggest how it is used. The pointer acts as a proxy for the hand, allowing users to 
interact with screen objects much like they would with physical objects. We humans have an innate 
understanding of how the human hand works, so if something looks like it can be pushed, we try to push it; if it 
looks like it can be grabbed, we try to grab it. Consequently, users can figure out how to use objects with strong 
affordance just by looking at them and trying them. 


v 


These objects have strong affordance. 


By contrast, objects with poor affordance are harder to figure out. Such objects often require a label or 
instruction to explain them. 


View available ca 


Internet 
These objects have poor affordance. 


Some aspects of mouse use are not intuitive 


Right-clicking, double-clicking, and clicking with Shift or Ctrl key modifiers are three mouse interactions that 
aren't intuitive, because they have no real world counterparts. Unlike keyboard shortcuts and access keys, these 
mouse interactions usually aren't documented anywhere in the UI. This suggests that right-click, double-click, and 
keyboard modifiers shouldn't be required to perform basic tasks, especially by novice users. It also suggests that 
these advanced interactions must have consistent, predictable behavior to be used effectively. 


Single-click or double-click? 


Double-clicking is used so extensively on the Windows desktop that it may not seem like an advanced interaction. 
For example, opening folders, programs, or documents in the file pane of Windows Explorer is performed by 
double-clicking. Opening a shortcut on the Windows desktop also uses double-clicking. By contrast, opening 
folders or programs in the Start menu requires a single click. 


Selectable objects use single-click to perform selection, so they require a double-click to open, whereas non- 
selectable objects require only a single click to open. This distinction isn't understood by many users (clicking a 
program icon is clicking a program icon, right?) and as a result, some users just keep clicking on icons until they 
get what they want. 


Direct manipulation 


Interacting with objects directly is referred to as direct manipulation. Pointing, clicking, selecting, moving, 
resizing, splitting, scrolling, panning, and zooming are common direct manipulations. By contrast, interacting with 
an object through its properties window or other dialog box could be described as indirect manipulation. 
However, where there is direct manipulation, there can be accidental manipulation—and therefore the need 
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for forgiveness. Forgiveness is the ability to reverse or correct an undesired action easily. You make direct 
manipulations forgiving by providing undo, giving good visual feedback, and allowing users to correct mistakes 
easily. Associated with forgiveness is preventing undesired actions from happening in the first place, which you 
can do by using constrained controls and confirmations for risky actions or commands that have unintended 
consequences. 


Standard mouse button interactions 


The standard mouse interactions depend on a variety of factors, including the mouse key clicked, the number of 
times it is clicked, its position during the clicks, and whether any keyboard modifiers were pressed. Here is a 
summary of how these factors usually affect interaction: 


For most objects, left double-clicking performs a single left click and performs the default command. The default 
command is identified in the context menu. 


For some types of selectable objects, each click expands the effect of the click. For example, single-clicking in a text box 
sets the input location, double-clicking selects a word, and triple-clicking selects a sentence or paragraph. 


Right-clicking displays an object's context menu. 


Keeping the mouse still while pointing results in hovering. 


Keeping the mouse still while pressing the mouse buttons indicates clicking and single object selection. Moving the 
mouse indicates moving, resizing, splitting, dragging, and multiple object selection. 


The Shift key extends selection contiguously. 


The Ctrl key extends selection by toggling the selection state of the clicked item without affecting the selection of other 
objects. 


Common pointer shapes 
The following tables describe the common pointer shapes, along with their interactions and effects. 


Simple mouse interactions 


Simple action | Interaction Typical effect 


Pointing Position the pointer to a specific object Target displays its hover state and any dynamic 
without clicking any mouse buttons. affordances. 


Hovering Position the pointer to a specific object Target displays its tooltip, infotip, or equivalent. 
without clicking any mouse buttons and 
without moving for at least a second. 

Clicking Position the pointer to a specific, non- For single clicks with the primary button, 


selectable object and press and release a activate the object. For double-clicks with the 
mouse button without moving. Clicking takes |primary button, activate the object and perform 
effect on the mouse button release to allow [the default command. For the secondary 

users the opportunity to cancel the click by —_|button, display the object's context menu. 
moving the mouse off the target. Therefore, 

mouse press only indicates the selected 

target. 
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Selecting Position the pointer to a specific, selectable |For single clicks with the primary button, select 
object and press and release a mouse button. |the object. If the users drags the mouse, select 
a contiguous range of objects. For double-clicks 
with the primary button, select the object and 


perform the default command. 


For text, the right primary button click sets the 
insertion point, the second selects word at the 
insertion point, and the third click selects the 
sentence or paragraph. 


Pressing Position the pointer to a specific object and 


press a mouse button without releasing. 


For auto-repeat functions (such as pressing a 
scroll arrow to continuously scroll), activate 
repeatedly. Otherwise indicates the start of a 
move, resize, split, or drag, unless followed by a 
release without moving. 


Wheeling Move mouse wheel. Window scrolls vertically in direction of mouse 
wheel movement. 


Pointers 


Shape /|Name When used 


Compound mouse interactions 


Compound Interaction Typical effect Pointers 
action 


Moving If movingisa Object moves in 
mode (entered 
by givinga 
command), 
enter the mode, 
position the 
pointer over a 
movable object, 
press button and 
move mouse, 
release mouse 
button. In this 
case, the pointer 
changes shape 
to indicate the 
mode. 


Move 
direction of 
pointer fp 


movement. Used to move a window in any direction. 


Pan 


” 


Used to move an object within a window in any 
direction. 


Otherwise, 
position the 
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Resizing 


Splitting 


Dragging and 
dropping 


pointer over a 
movable object's 
grabber, press 
button and 
move mouse, 
release mouse 
button. In this 
case, the pointer 
doesn't need to 
change shape. 


Position the 
pointer over a 
resizable border 
or resize handle, 
press a mouse 
button and 
move mouse, 
and then release 
the mouse 
button. 


Position the 
pointer over a 
splitter, press a 
mouse button 
and move 
mouse, and then 
release the 
mouse button. 


Position the 
pointer over a 
valid object for 
dragging, press a 
mouse button 
and move 
mouse to a drop 
target, and then 
release the 
mouse button. 


Activity indicators 


Object resizes in 


direction of 
pointer 
movement. 


Split pane border 


moves in 
direction of 
pointer 
movement. 


Object is moved 
or copied to the 
drop target. 


Vertical and horizontal resize 
T ~ 
Used to resize a single dimension. 


Diagonal resize 


SX 


Used to resize two dimensions simultaneously. 


Row and column resize 


++ 


Used to resize a row or column in a grid. 


Window splitters 
a oe 
Used to resize a split pane vertically or horizontally. 


Normal select 


i> Move to Videos 


Used over valid drag targets. M ay also have an infotip 
to indicate specific effect. 


Unavailable 


© 


Used to indicate a surface isn't a valid drop target. 


The following table shows pointers that users see when performing an action that takes longer than a couple of 
seconds to complete. 
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Shape |Name When used 


| re) Busy pointer Used to wait for a window to become responsive. 


O Working in background pointer |Used to point, click, press, or select while a task completes in the 
ly background. 


Custom mouse shapes 


Applications that allow users to perform several different non-standard direct manipulations provide a palette 
window with direct manipulation modes. 


f(s a BEEEES, SSSR 
| ZZ 
GE 


Fa 
ZY 
[JA 

oe 


4 
Oo OB 


In this example, Paint has a palette window of direct manipulation modes. 


Hand pointers 


Text and graphics links use a hand or "link select" pointer (a hand with the index finger pointing ow ) because 
of their weak affordance. While links may have other visual clues to indicate that they are links (such as 
underlines and special placement), displaying the hand pointer on hover is the definitive indication of a link. 


To avoid confusion, it is imperative not to use the hand pointer for other purposes. For example, command 
buttons already have a strong affordance, so they don't need a hand pointer. The hand pointer must mean "this 
target is a link" and nothing else. 

Fitts’ Law 


Fitts' Law is a well known principle in graphical user interface design ergonomics that essentially states: 


- The farther away a target is, the longer it takes to acquire it with the mouse. 
- The smaller a target is, the longer it takes to acquire it with the mouse. 


Thus, large targets are good. Be sure to make the entire target area clickable. 


Incorrect: 
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> & Network 
> Control Panel 
‘& Recycle Bin 


> dnl 


Correct: 
> & Network 
> Control Panel 
‘© Recycle Bin 


“inn 


In the correct example, the entire target is clickable. 


You can dynamically change the size of a target when pointing to make it easier to acquire. 


& Character Map 


Oigr-eg 2H UBD REEOOORS0E 
54 8 [lis PPleasicolericn 


iets, OO cai 
+0038: Digit Eigh 
TT bererersretto)n [i [i] k] t[m[alo]p 


In this example, a target becomes larger when the user is pointing to make it easier to acquire. 
And close targets are also good. Locate clickable items close to where they are most likely going to be used. 


Incorrect: 
Ps 
¥ 


2° 
Pi 
GA 
OA 
be 
oZ 


@ @ 


eo SESS Reee eee 
* Cs ooee) 2) 
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In this example, the color palette is too far from where it is likely to be used. 


Consider the fact that the user's current pointer location is as close as a target can be, making it trivial to acquire. 


Thus, context menus take full advantage of Fitts' law, as do the mini toolbars used by Microsoft Office. 


Ly ‘Segoe U ~|9 “iA a Ay abs = ide 
| ¥ Menu Bar BiI2W- A~ te i= - 
— meee 


¥ = Status Bar 


¥ Lock the Toolbars 


Use Large Icons 


Customize Command Bar b 


The current pointer location is always the easiest to acquire. 


Also, consider alternative input devices when determining object sizes. For example, the minimum target size 
recommended for touch is 23x23 pixels (13x13 DLUs). 


Environments without a mouse 


Not all Windows environments have a mouse. For example, kiosks rarely have a mouse and usually have a 
touchscreen instead. This means that users can perform simple interactions such as left-clicking and perhaps 
dragging-and-dropping. However, they can't hover, right-click, or double-click. This situation is easy to design for 
because these limitations are usually known in advance. 


Using a mouse requires fine motor skills, and as a result, not all users can use a mouse. To make your software 
accessible to the broadest audience, make sure all interactions for which fine motor skills aren't essential can be 
performed using the keyboard instead. 


For more information and guidelines, see Accessibility. 


If you do only four things... 

1. Give mouse interactions behaviors consistent with their standard effects, using the standard pointers 
whenever appropriate. 

2. Limit advanced mouse interactions (those requiring right clicks, multiple clicks, or modifier keys) to advanced 
tasks targeted at advanced users. 

3. Assign advanced mouse interactions consistent, predictable behaviors so that they can be used effectively. 
4, Make sure your program provides the ability to reverse or correct any undesired actions—especially for 
destructive commands. Accidental actions are more likely when using direct manipulation. 


Guidelines 
Click affordance 


- Never require users to click an object to determine if it is clickable. Users must be able to determine clic 
visual inspection alone. 


kability by 


o Primary UI (such as commit buttons) must have a static click affordance. Users shouldn't have to hover to 


discover primary UI. 


o Secondary UI (such as secondary commands or progressive disclosure controls) can display their click 
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affordance on hover. 


o Text links should statically suggest link text, then display their click affordance (underline or other presentation 
change, with hand pointer) on hover. 


o Graphics links only display a hand pointer on hover. 
- Use the hand (or "link select") pointer only for text and graphic links. Otherwise, users would have to click on objects 
to determine if they are links. 


Standard mouse button interactions 


The following table summarizes the mouse button interactions that apply in most cases: 


Interaction Effect 
Hover Target displays its tooltip, infotip, or equivalent. 
Single left-click Activates or selects the object. For text, sets the insertion point. 


[Single right-click right- [Single right-click Selects the [Selects the object and displaysitscontextmenu. and displays its context menu. 

Double left-click Activates or Sethe oes ce AS oe the object, and performs the default command. For text, selects 
word at the insertion point (a third click selects the sentence or paragraph). 

[Double right-click |same as single right-click. 


Shift single left-click 


For selectable objects, contiguously extends the selection. Otherwise, same as single 
left-click with possible modifications. For example, in Paint, drawing an oval with the 
Shift key modifier results in drawing a circle. 


Shift [Shift single right-click right-click |Same as Shift Same as Shift single left-click. left-click. 


ee double left-click |Sameas See single left-click, and performs the default command on the entire 
selection. 


Shift double [Shift double right-click -click |Same as Shift Same as Shift single left-click. left-click. 


Ctrl Sa left-click For selectable Se extends the selection by toggling the selection state of the 
clicked item without affecting the selection of other objects (therefore allowing 


selection that isn't contiguous). Otherwise, same as single left-click. 


[ctrl single right-click |same as Ctrl single left-click. 


Ctrl double left-click  |Same as Ctrl single left-click, and performs the default command on the entire 
selection. 


[Ctrl double right-click — double [Ctrl double right-click — -click |Same as Ctrl [Same as Ctrl single left-click, left-click. 


Mouse interaction 


- Make click targets at least 16x16 pixels so that they can be easily clicked by any input device. For touch, the 


recommended minimum control size is 23x23 pixels (13x13 DLUs). Consider dynamically changing the size of small 
targets when the user is pointing to make them easier to acquire. 


Incorrect: 
3 cal 
In this example, the spin control buttons are too small to be used effectively with touch ora 
pen. 


- Make splitters at least five pixels wide so that they can be easily clicked by any input device. Consider dynamically 
changing the size of small targets when the user is pointing to make them easier to acquire. 


© 2010, Microsoft Corporation. All rights reserved. Page 429 of 882 


Incorrect: 


F Documents 


E Pictures 
7 Music 
More » 
i q 
Folders v 
ab _catalogs - 
ab _private 


In this example, the splitter in the Windows Explorer navigation pane is too narrow to be used effectively with a 
mouse or pen. 


Provide users a margin of error spatially. Allow for some mouse movement (for example, three pixels) when users 
release a mouse button. Users sometimes move the mouse slightly as they release the mouse button, so the mouse 
position just before button release better reflects the user's intention than the position just after. 


Provide users a margin of error temporally. Use the system double-click speed to distinguish between single and 
double clicks. 


Have clicks take effect on mouse button up. Allow users to abandon mouse actions by removing the mouse from valid 
targets before releasing the mouse button. For most mouse interactions, pressing a mouse button only indicates the 
selected target and releasing the button activates the action. Auto-repeat functions (such as pressing a scroll arrow to 
continuously scroll) are an exception. 


Capture the mouse for selecting, moving, resizing, splitting, and dragging. 


Use the Esc key to let users abandon compound mouse interactions such as moving, resizing, splitting, and dragging. 


If an object doesn't support double clicks but users are likely to assume it does, interpret a "double click" as one 
single click. Assume the user intended a single action instead of two. 


Incorrect: 


Fr. Computer h 


Because users are likely to assume that taskbar buttons support double clicks, a "double click" should be handled 
as a single click. Windows Vista ®has the correct behavior when a window is minimized. 


Ignore redundant mouse clicks while your program is inactive. For example, if the user clicks a button 10 times while a 
program is inactive, interpret that as a single click. 


Don't use double drags or chords. A double drag is a drag action commenced with a double-click, and a chord is when 
multiple mouse buttons are pressed simultaneously. These interactions aren't standard, aren't discoverable, are 
difficult to perform, and are most likely performed accidentally. 


Don't use Alt as a modifier for mouse interactions. The Alt key is reserved for toolbar access and access keys. 
Don't use Shift+Ctrl as a modifier for mouse interactions. Doing so would be too difficult to use. 


Make hover redundant. To make your program touchable, take full advantage of hover but only in ways that are not 
required to perform an action. This usually means that an action can also be performed by clicking, but not necessarily 
in exactly the same way. Hover isn't supported by most touch technologies, so users with such touchscreens can't 
perform any tasks that require hovering. 


Mouse wheel 


- Make the mouse wheel affect the control, pane, or window that the pointer is currently over. Doing so avoids 


unintended results. 
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- Make the mouse wheel take effect without clicking or having input focus. Hovering is sufficient. 


- Make the mouse wheel affect the object with the most specific scope. For example, if the pointer is over a scrollable 
list box control in a scrollable pane within a scrollable window, the mouse wheel affects the list box control. 


- Don't change the input focus when using the mouse wheel. 


- Give the mouse wheel the following effects: 
o For scrollable windows, panes, and controls: 
» Rotating the mouse wheel scrolls the object vertically, where rotating up scrolls up. For the wheel to 
have natural mapping, rotating the mouse wheel should never scroll horizontally because doing so is 
disorienting and unexpected. 


= If the Ctrl key is pressed, rotating the mouse wheel zooms the object, where rotating up zooms in and 
rotating down zooms out. 


= Tilting the mouse wheel scrolls the object horizontally. 


o For zoomable windows and panes (without scrollbars): 
= Rotating the mouse wheel zooms the object, where rotating up zooms in and rotating down zooms out. 


= Tilting the mouse wheel has no effect. 


o For tabs: 
» Rotating the mouse wheel can change the current tab, regardless of the orientation of the tabs. 


= Tilting the mouse wheel has no effect. 
o Ifthe Shift and Alt keys are depressed, the mouse wheel has no effect. 


- Use the Windows system settings for the vertical scroll size (for rotating) and horizontal scroll size (for tilting). These 
settings are configurable through the M ouse control panel item. 


- Make rotating the mouse wheel more rapidly result in scrolling more rapidly. Doing so allows users to scroll large 
documents more efficiently. 


- For scrollable windows, consider having clicking the mouse wheel button put the window in "reader mode." Reader 
mode plants a special scroll origin icon and scrolls the window in a direction and speed relative to the scroll origin. 


te Microsoft Corporation - Windows Internet Explorer 


OW ~ |G http://wwwmicros + | #9 | X 


File Edit View Favorites Tools Help 


wt Ci Microsoft a le 


Daylight Saving Time is here Popular Down oad 
How to update your computer for © Windows Senses al 
recent changes in the U.S. 

e DirectX (Feb. 2007 U 


e Special offers for Windows Vista e ActiveSync 4.5 
Take advantage of great deals on Wind 4) 


Vista-based PCs and software from your 
favorite brands ~ |op Searches 


See how Windows Vista is more ¢ Templates 

entertaining 

Watch TV shows on your time, get the 
mm 


e Clip art 


@ Internet | Protected Mode: On 
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In this example, Windows Internet Explorer ®supports reader mode. 
Hiding the pointer 


- Don't hide the pointer. Exceptions: 
o Presentation applications running in full screen presentation mode may hide the pointer. However, the pointer 
must be restored immediately when users move the mouse, and can be rehidden after two seconds of 
inactivity. 


o Environments without a mouse (such as kiosks) can permanently hide the pointer. 


- By default, Windows hides the pointer while the user is typing in a text box. This Windows system setting is 
configurable through the M ouse control panel item. 


Activity pointers 
0 P, 


The activity pointers in Windows are the busy pointer ( ~~ ) and the working in background pointer ( 


Display the busy pointer when users have to wait more than one second for an action to complete. Note that the busy 
pointer has no hot spot, so users can't click anything while it is displayed. 


Display the working in background pointer when users have to wait more than one second for an action to complete, 
but the program is responsive and there is no other visual feedback that the action isn't complete. 


Don't combine activity pointers with progress bars or progress animations. 


Caret 


Don't display the caret until the text input window or control has input focus. The caret suggests input focus to users, 
but a window or control can display the caret without input focus. Of course, don't steal input focus so that an out-of- 
context dialog box can display the caret. 


Incorrect: 


Connect to www.fabrikam.com 


The server www.fabrikam.com at www.fabrikam.com requires 
a username and password. 


User name: © Jonathan 


Password: 


Remember my password 


Lox) [cancel | 


The Windows Credential M anager is displayed out of context with the caret but without input focus. As a result, 
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users end up typing their password in unexpected places. 


- Place the caret where users are most likely to type first. Usually this is either the last place the user was typing or at 
the end of the text. 


Accessibility 


- For users who can't use the mouse at all, make the mouse redundant with the keyboard. 
o Users should be able to do everything with the keyboard that they can with the mouse, except actions for 
which fine motor skills are essential, such as drawing and game playing. 


o Users should be able to do everything with the mouse that they can with the keyboard, except efficient text 
entry. 


- For users with limited ability to use the mouse: 
o Don't make double-clicking and dragging the only way to perform an action. 
For more information and guidelines, see Accessibility. 


Documentation 


When referring to the mouse: 


Avoid using the plural mice; if you need to refer to more than one mouse, use mouse devices. 


Use mouse button to indicate the left mouse button. Don't use primary mouse button. Similarly, use right mouse button 
instead of secondary mouse button. Regardless of accuracy, users understand these terms and users who reprogram 
their buttons make the mental shift. 


Use wheel for the rotating part of the mouse wheel, and wheel button to refer to the clickable part. 


Use verbs such as click, point, and drag to refer to mouse actions. Users rotate the wheel vertically, tilt it horizontally, 
and click the wheel button. 


Use drag, not drag and drop, for the action of moving a document or folder. It is acceptable to use drag-and-drop as an 
adjective, as in "moving the folder is a drag-and-drop operation." 


Always hyphenate double-click and right-click as verbs. 


Use click, not click on. Click in (as in "click in the window") is acceptable. 


When referring to mouse pointers: 


- Refer to the mouse pointer as the pointer. Use cursor only in technical documentation. 


- For pointers with activity indicators, use busy pointer for the pointer consisting of only an activity indicator, and 
working in background pointer for the combination pointer and activity indicator. 


- For the other types of pointers, don't use descriptive labels to refer to the pointer. If necessary, use a graphic to 
describe how the mouse pointer can appear on the screen. 


Examples: 


- Point to the window border. 
- Using the mouse, click the Minimize button. 
« Hold down Shift and click the right mouse button. 


+P 


- When the pointer becomes a , drag the pointer to move the split line. 
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Touch 


All Microsoft®W indows@applications should have a great touch experience. And doing so is easier than you think. 


Design concepts 
Guidelines 
Control usage 
Control sizing 
Control layout and spacing 
Interaction 
Windows Touch gestures 
Forgiveness 
Documentation 


Touch refers to the way Windows lets you interact directly with a computer using a finger. Compared to using a 
mouse, keyboard, or pen, touch is often much more natural, engaging, and convenient. 


Using touch. 


Many touch interactions are performed using gestures and flicks. A gesture is a quick movement of one or more 
fingers on a screen that the computer interprets as a command, rather than as a mouse movement, writing, or 
drawing. Windows 7 has new multitouch gestures such as pan, zoom, rotate, two-finger tap, and press and tap. 
One of the quickest and easiest gestures to perform is a flick. A flick is a simple gesture that results in navigation 
or an editing command. Navigational flicks include drag up, drag down, move back, and move forward, whereas 
editing flicks include copy, paste, undo, and delete. 


A manipulation is a real-time, physical handling of an object. A manipulation differs from a gesture in that the 
input corresponds directly to how the object would react naturally to the action in the real world. For example, a 
photo viewing application might allow users to manipulate a photo by moving, zooming, resizing, and rotating the 
image. M ultitouch manipulations use multiple contact points simultaneously. 


For tasks that require fine movement or hover, Windows Vista@provides the touch pointer, which is a floating, on- 
screen pointer that looks like a mouse. Because the touch pointer isn't as easy to use as direct input, touchable 
programs avoid relying on the touch pointer. The touch pointer is disabled by default in Windows 7. 


A program is considered touchable when it has only the touch support provided by Windows and the controls for 
the most important tasks are easy to touch. (Tasks that require using a fingernail aren't considered touch friendly 
—touchable controls need to be large enough for easy targeting with a fingertip.) In practice, this means: 


- The program's interactive controls are large enough to be easily touchable—at least 23x23 pixels (13x13 dialog units, or DLUs). 


- The program has good keyboard and mouse support, so that relevant system gestures such as flicks, multitouch gestures, and 
drag-and-drop are functional. 


- No tasks require using hover or the touch pointer. 
- All controls use Microsoft Active Accessibility (M SAA) to provide programmatic access to the UI for assistive technologies. 
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A program is considered touch-enabled when it has been designed for touch for its primary tasks, which usually 
means: 


- The most frequently used controls are at least 40x40 pixels (23x22 DLUs). 


- Relevant gestures are supported (including panning, zoom, rotate, two-finger tap, press and tap), and the effect occurs at the 
point of contact. 


- The program provides smooth, responsive visual feedback while panning, zooming, and rotating so that it feels highly interactive. 
A program is considered touch-optimized when it has been specifically designed for touch, which usually means: 


Tasks are designed for easy touch by placing the most frequently performed commands directly on the UI or content instead of in 
drop-down menus. 


The program's special experiences are designed to have an immersive touch experience (possibly using raw touch input data), 
with multitouch manipulations and details like having feedback with real-world physical properties, such as momentum and 
friction. 


Tasks are forgiving, allowing users to correct mistakes easily and handle inaccuracy with touching and dragging. 


Tasks are designed to avoid or reduce the need for heavy text input or precise selection. 


Note: Guidelines related to mouse, pen, and accessibility are presented in separate articles. 


Design concepts 
Using touch for input has the following characteristics: 


Natural and intuitive. Everyone knows how to point with a finger and touch things. Object interactions are designed to 
correspond to how users interact with objects in the real world in a consistent manner. 


Less intrusive. Using touch is silent, and consequently much less distracting than typing or clicking, especially in social situations 
such as meetings. Compared to using a pen, using a finger is particularly convenient because you don't have to locate or pick up a 
pen. 


Portable. A computer with touch capability can be more compact because most tasks can be completed without a keyboard, 
mouse, or touchpad. It can be more flexible because it doesn't require a work surface. It enables new places and scenarios for 
using a computer. 


Direct and engaging. Touch makes you feel like you are directly interacting with the objects on the screen, whereas using a 
mouse or touchpad always requires you to coordinate hand movements with separate on-screen pointer movements—which 
feels indirect by comparison. 


Reduced accuracy. Users can't target objects as accurately using touch, compared to a mouse or pen. Consequently, you can't 
expect users to tap or manipulate small objects. 


Touch provides a natural, real-world feel to interaction. Direct manipulation and animation complete this 
impression, by giving objects a realistic, dynamic motion and feedback. For example, consider a card game. Not 
only is it convenient and easy to drag cards using a finger, the experience takes on an engaging real-world feel 
when you can toss the cards and have them glide, spin, and bounce exactly like physical cards. And when you try 
to move a card that can't be moved, it's a better experience to have the card resist but not prevent movement, 
and settle back in place when released, to clearly indicate that the action was recognized but can't be done. 


All Windows programs should be touchable 


While touch is traditionally associated with Tablet PCs, it is becoming common on ordinary computers. The 
Windows Tablet and Touch Technology is a standard component of Windows Vista and Windows 7, so any 
compatible computer has the ability to take advantage of touch if it has the appropriate hardware. As a result, 
computer manufacturers are now including touchscreens in ordinary laptops and even in desktop monitors. 


As touch spreads from Tablet PCs to other types of computers, software program developers and designers will 


find it increasingly important to support touch as well. All Windows programs should have a great touch 
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experience. Users should be able to perform your program's most important tasks efficiently using their 
fingers. Some tasks, like typing or detailed pixel manipulation, may not be appropriate for touch, but those that 
are should be touchable. 


Fortunately, if your program is already well designed, providing a great touch experience is easy to do. For this 
purpose, a well-designed program: 


Has good mouse support. The interactive controls have clear, visible affordances. Objects have standard behaviors for the 
standard mouse interactions (single and double left-click, right-click, drag, and hover). 


Has good keyboard support. The program makes users efficient by providing standard shortcut key assignments, especially for 
navigation and editing commands that can also be generated through touch gestures. 


Has controls large enough for touch. The controls have a minimum size of 23x23 pixels (13x13 DLUs), and the most commonly 
used controls are at least 40x40 pixels (23x22 DLUs). To avoid unresponsive behavior, there should be no small gaps between 
targets—the UI elements should be spaced so that adjacent targets are either touching or have at least 5 pixels (3 DLUs) of space 
between them. 


Provides smooth, responsive panning and zooming wherever appropriate. The program redraws quickly enough to pan and 
zoom events that it feels interactive during the gesture. 


Is accessible. Uses Microsoft Active Accessibility (M SAA) to provide programmatic access to the UI for assistive technologies. The 
program appropriately responds to theme and system metric changes. 


Works well and looks good in 120 dpi (dots per inch), which is the recommended default display resolution for computers 
enabled for Windows Touch. 


Uses common controls. Most common controls are designed to support a good touch experience. If necessary, the program uses 
well-implemented custom controls that are designed to support easy targeting and interactive manipulation. 


Uses constrained controls. Constrained controls like lists and sliders, when designed for easy touch targeting, can be better than 
unconstrained controls like text boxes because they reduce the need for text input. 


Provides appropriate default values. The program selects the safest (to prevent loss of data or system access) and most secure 
option by default. If safety and security aren't factors, the program selects the most likely or convenient option, thereby 
eliminating unnecessary interaction. 


Provides text auto completion. Provides a list of most likely or recently input values to make text input much easier. 


Unfortunately, the converse is also true—if your program isn't well designed, its shortcomings are going to be 
especially obvious to users who use touch. 


Just as accessible software benefits all users, providing a great touch experience benefits all users because 
everyone benefits when basic interactions are easy to perform, efficient, responsive, and forgiving. 


Model for touch interaction 


If you aren't experienced with using touch, the best introduction is to learn by doing. Get a touch-enabled 
computer, put the mouse and keyboard aside, and do the tasks that you normally do using just your fingers. If 
you have a Tablet PC, experiment with holding it in different positions, such as on your lap, lying flat on a table, 
orin your arms while you're standing. Try using it in portrait and landscape orientation. 


As you experiment with touch, you'll discover that: 


Small controls are difficult to use. The size of the controls greatly affects your ability to interact effectively. Controls that are at 
least 23x23 pixels (13x13 DLUs) are usable with a finger, but larger controls of at least 40x40 pixels (23x22 DLUs) are even more 
comfortable to use. For example, the Start menu (42x35 pixels) is easy to touch whereas spin controls (15x11 pixels) are much 
too small to use with a finger. 


Task locality helps. While you can move the pointer across a 14-inch screen with a 3-inch mouse movement, using touch requires 
you to move your hand the full 14 inches. Repeatedly moving between targets that are far apart can be tedious, so it's much 
better to keep task interactions within the range of a resting hand whenever possible. Context menus are convenient because 
they require no hand movement. 


Hover must not be required. M ost touchscreen technologies don't detect a hovering finger, even if they can detect a hovering 
pen. If a program has tasks that depend on hover, you won't be able to perform them efficiently using touch. 


Text input and selection are difficult. Lengthy text input is especially difficult using touch, so auto-completion and acceptable 
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default text values can really simplify tasks. Text selection can also be quite difficult, so tasks are easier when they don't require 
precise cursor placement. 


- Small targets near the edge of the display can be very difficult to touch. Some display bezels protrude, and some touchscreen 
technologies are less sensitive at the edges, making controls near the edge harder to use. For example, the Minimize, M aximize/ 
Restore, and Close buttons on the title bar can be harder to use when a window is maximized. 


While there are several challenges here, addressing them improves the experience for all users. 
Basic touch design principles 


Each input device has its strengths and weaknesses. The keyboard is best for text input and giving commands 
with minimal hand movement. The mouse is best for efficient, precise pointing. Touch is best for object 
manipulation and giving simple commands. A pen is best for freeform expression, as with handwriting and 
drawing. 


When thinking about touch support for your program: 


- Don't assume that if a UI works well for a mouse, it also works well for touch. While good mouse support is a start, a good 
touch experience has a few additional requirements. 


- You can assume that if a Ul works well for a finger, it also works well for a pen. M aking your program touchable goes a long way 
to providing good pen support. The primary difference is that fingers have a blunter tip, so they need larger targets. And again, 
hover must be optional. For guidelines about supporting pen input, see Pen. 


- Don't depend on touch pointer to fix touch UI problems. Because the touch pointer isn't as easy to use as direct input, view the 
touch pointer as a last resort for programs that haven't been designed for touch. 


Control sizes 


Fitts' Law states that the time required to interact with a target depends upon the size of the target and the 
distance to it. The smaller a target is, and the further away it is, the harder it is to use. But due to the large 
surface area of the fingertip, small controls that are too close together can also be difficult to target precisely. 


Asa general rule, a control size of 23x23 pixels (13x13 DLUs) is a good minimum interactive control size for any 
input device. By contrast, the spin controls at 15x11 pixels are much too small to be used effectively with touch. 


9DLUs (15 pixels) 


-—* 


The spin control is too small for touch. 


Note that the minimum size is really based on physical area, not layout metrics such as pixels or DLUs. Research 
indicates that the minimum target area for efficient, accurate interaction using a finger is 6x6 millimeters (mm). 
This area translates to layout metrics as follows: 


Font Millimeters Relative pixels DLUs 


[9 point Segoe UI |6x6 [23x23 |13x13 


8 point Tahoma 6x6 23x23 15x14 


Furthermore, research shows that a minimum size of 10x10 mm (about 40x40 pixels) enables better speed and 
accuracy, and also feels more comfortable to users. When practical, use this larger size for command buttons 
used for the most important or frequently used commands. 
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Document.docx - Microsoft Word 
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40 DLUs (59 pixels) 


In this example, Microsoft Word uses buttons larger than 10x10 mm for the most important commands. 


[=] Calculator 


This version of Calculator uses buttons larger than 10x10 mm for its most frequently used commands. 


The goal isn't to have giant controls—just easily touchable controls. You can make controls easily touchable 
without appearing excessively large by using the techniques listed in the guidelines section later in this article. 


Note: When sizing controls, target 96 dpi. Users' ability to touch improves with higher resolutions. 
Control spacing 


The spacing between controls is also a factor in making controls easily touchable. Targeting is quicker but less 
precise when using a finger as the pointing device, resulting in users more often tapping outside their intended 
target. When interactive controls are placed very close together but are not actually touching, users may click on 
inactive space between the controls. Because clicking inactive space has no result or visual feedback, users are 
often uncertain what went wrong. If small controls are too closely spaced, the user needs to tap with precision to 
avoid tapping the wrong object. To address these issues, the target regions of interactive controls should either 
be touching or preferably have at least 5 pixels (3 DLUs) of space between them. 


You can make controls within groups easier to differentiate by using more than the recommended vertical 
spacing between controls. For example, radio buttons at 19 pixels high are shorter than the minimum 
recommended size of 23 pixels. When you have vertical space available, you can achieve roughly the same effect 
as the recommended sizing by adding an additional 4 pixels of spacing to the standard 7 pixels. 
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Correct: 


Paste Options 


@ Keep source formatting 
© Match destination formatting 
© Keep text only 


Set default paste 


(Lox) [_Cancet_] 


Better: 
Paste Options 


@ Keep source formatting 
© Match destination formatting 
© Keep text only 


Set default paste 


In the better example, the extra spacing between the radio buttons makes them easier to differentiate. 

There may be situations in which extra spacing would be desirable when using touch, but not when using the 
mouse or keyboard. In such cases, you should only use a more spacious design when an action is initiated using 
touch. 


Control location 


Task locality reduces tedious repeating cross-screen movements. To minimize hand movements, locate controls 
close to where they are most likely going to be used. 


Incorrect: 
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In this example from Windows XP, the color palette is too far from where it is likely to be used. 


Consider that the user's current location is the closest a target can be, making it trivial to acquire. Thus, context 
menus take full advantage of Fitts' law, as do the mini-toolbars used by Microsoft Office. 


‘Segoe U-~ p ’ 


¥ Menu Bar 


Links UX Gu ual : 


Status Bar —— 


| 


Lock the Toolbars 
Use Large Icons 


Customize Command Bar > 


The current pointer location is always the easiest to acquire. 


Small targets near the display edge can be difficult to touch, so avoid placing small controls near window edges. 
To ensure that controls are easy to target when a window is maximized, either make them at least 23x23 pixels 
(13x13 DLUs) or place them away from the window edge. 


Touch interactions 
System gestures 


System gestures are defined and handled by Windows. As a result, all Windows programs have access to them. 
These gestures have equivalent mouse, keyboard, and application command messages: 


[Systemgesture === = = —_—__‘| Synthesized equivalent message 
|Hover (when supported) [Mousehover 
[Double tap (down anduptwice) = [Mouse double left-click 
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[Drag (down, move, up) IM ouse left-drag 


Press, hold, and drag (down, pause, move, up) Mouse right-drag 
Select (down, move over selectable objects, up) Mouse select 


Developers: For more information, see SystemGesture Enumeration. 


Flicks 


Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts. Navigational flicks include drag 
up, drag down, move back, and move forward. Editing flicks include copy, paste, undo, and delete. To use flicks, 
your program only needs to respond to the related keystrokes commands—or your program can handle the 
events directly. 


$/ 
The eight flick gestures and their default assignments in Windows 7. The navigation flicks were changed to 
correspond to panning (where the object moves with the gesture) instead of scrolling (where the object moves in 
the opposite direction of the gesture). 


The eight flick gestures and their default assignments in Windows Vista. 


The navigational flicks have natural mapping, so they are easy to learn and remember. The editing flicks are 
diagonals that require more precision and their mappings are not as natural (flick towards the Recycle Bin to 
delete, flick in the Back arrow direction to undo), so these aren't enabled by default. All flick actions can be 
customized using the Pen and Input Devices control panel item. 


Flick === Symithesizedequivalentmessage 
[Flick up |Keyboard Scroll Down 

[Flick up-left diagonal = Keyboard Delete 
[Flick down-left diagonal |Keyboard Undo 
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Application gestures 


Applications can define and handle other gestures as well. The Microsoft Gesture Recognizer can recognize over 
40 gestures. To use application gestures, your program must define the gestures it recognizes, and then handle 
the resulting events. 


Hover 


Hover is a useful interaction because it allows users to get additional information through tips before initiating an 
action. Doing so makes users feel more confident and reduces errors. 


Unfortunately, hover isn't supported by touch technologies, so users will not be able to hover when usinga 
finger. The simple solution to this problem is to take full advantage of hover, but only in ways that are not 
required to perform an action. In practice, this usually means that the action can also be performed by clicking, 
but not necessarily in exactly the same way. 


Wednesday, September 26, 2007 


September, 2007 
Mo Tu We Th 
28 30 


11 


10:56:09 AM 


Change date and time settings... 


=a 
Biseiss Wednesday, September 26, 2007 


Ea Le) 10:55 AM 
h 


In this example, users can see today's date by either hovering or clicking. 
Responsiveness and consistency 


Responsiveness is essential for creating touch experiences that feel direct and engaging. To feel direct, gestures 
must take effect immediately, and an object's contact points must stay under the user's fingers smoothly 
throughout the gesture. The effect of a manipulation should map directly to the user's motion, so, for example, if 
the user rotates his fingers 90 degrees, the object should rotate 90 degrees as well. Any lag, choppy response, 
loss of contact, or inaccurate results destroys the perception of direct manipulation and also of quality. 


Consistency is essential for creating touch experiences that feel natural and intuitive. Once users learn a 
standard gesture, they expect that gesture to have the same effect across all applicable programs. To avoid 
confusion and frustration, never assign non-standard meanings to standard gestures. Instead, use custom 
gestures for interactions unique to your program. 


Forgiveness 


What makes touch so natural, expressive, efficient, and engaging is its directness. In fact, interacting through 
touch is often referred to as direct manipulation. However, where there is direct manipulation, there can be 
accidental manipulation—and therefore the need for forgiveness. 


Forgiveness is the ability to reverse or correct an undesired action easily. You make a touch experience forgiving 
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by providing undo, giving good visual feedback, having a clear physical separation between frequently used 
commands and destructive commands, and allowing users to correct mistakes easily. Associated with forgiveness 
is preventing undesired actions from happening in the first place, which you can do by using constrained controls 
and confirmations for risky actions or commands that have unintended consequences. 


Editing text 


Editing text is one of the most challenging interactions when using a finger. Using constrained controls, 
appropriate default values, and auto-completion eliminates or reduces the need to input text. But if your 
program involves editing text, you can make users more productive by automatically zooming input UI up to 
150 percent by default when touch is used. 


For example, an e-mail program could display UI at normal touchable size, but zoom the input UI to 150 percent 
to compose messages. 


Hello - M... 


| Message | Insert Options —_—Format Text 


2 SOO, 
=4) 
Paste Basic Names | Include Options Spelling 
~ SF Text ~ |e 
Clipboard ™ | | \| | Proofing 


This message has not been sent. 


In this example, the input UI is zoomed to 150 percent. 


If you do only six things... 

1. Make your Windows programs have a great touch experience! Users should be able to perform your 
program's most important tasks efficiently using a finger (at least the tasks that don't involve a lot of typing or 
detailed pixel manipulation). 

2. For common controls, use the standard control sizing. For other controls, make sure they have at least a 
23x23 pixel (13x13 DLU) click target, even if their static appearance is much smaller. 

3. Make use of hover, but don't make it the only way to perform an action. Hover isn't supported by most 
touchscreen technologies. 

4. To create a direct and engaging experience, have gestures take effect immediately, keep contact points under 
the user's fingers smoothly throughout the gesture, and have the effect of the gesture map directly to the user's 
motion. 

5. To create a natural and intuitive experience, support appropriate standard gestures and assign them their 
standard meanings. Use custom gestures for interactions unique to your program. 

6. Make sure your program provides the ability to reverse or correct any undesired actions—especially for 
destructive commands. Accidental actions are more likely when using touch. 


Guidelines 
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Control usage 


- Prefer using common controls. M ost common controls are designed to support a good touch experience. 


- Choose custom controls that are designed to support touch. You might need to have custom controls to support your program's 
special experiences. Choose custom controls that: 
o Can be sized large enough to be easily touchable. 


o When manipulated, move and react the way real-world objects move and react, such as by having momentum and 
friction. 


o Are forgiving by allowing users to easily correct mistakes. 


o Are forgiving of inaccuracy with clicking and dragging. Objects that are dropped near their destination should fall into the 
correct place. 


o Have feedback that is clearly visible even when the finger is over the control, such a ripple effect. 


Prefer constrained controls. Use constrained controls like lists and sliders whenever possible, instead of unconstrained controls 
like text boxes, to reduce the need for text input. 


Provide appropriate default values. Select the safest (to prevent loss of data or system access) and most secure option by 
default. If safety and security aren't factors, select the most likely or convenient option, thereby eliminating unnecessary 
interaction. 


Provide text auto-completion. Provide a list of most likely or recently input values to make text input much easier. 


For important tasks that use multiple selection, if a standard multiple-selection list is normally used, provide an option to use 
a check box list instead. 


Control sizing 


- For common controls, use the recommended control sizes. The recommended control sizing satisfies the 23x23 pixel (13x13 
DLU) minimum size, except for check boxes and radio buttons (their text width compensates somewhat), spin controls (which 
aren't usable with touch but are redundant), and splitters. 
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The recommended control sizes are easily touchable. 


- Forcommand buttons used for the most important or frequently used commands, use a minimum size of 40x40 pixels (23x22 
DLUs) whenever practical. Doing so yields better speed and accuracy, and also feels more comfortable to users. 


Whenever practical, use larger command buttons for important or frequently used commands. 


- For other controls: 
o Use larger click targets. For small controls, make the target size larger than the statically visible Ul element. For example, 
16x16 pixel icon buttons can have a 23x23 pixel click target buttons, and text elements can have selection rectangles 8 
pixels wider than the text and 23 pixels high. 


Correct: 


Blu)? A-|e 


i 
ul 
“wat 
“a 
hal 
al 


Incorrect: 
& Network 
Control Panel 
\& Recycle Bin 


a Inf 


Correct: 

& Network 
Control Panel 
‘© Recycle Bin 


bmp | 


In the correct examples, the click targets are larger than the statically visible UI elements. 


o Use redundant click targets. It's acceptable for click targets to be smaller than the minimum size if that control has 
redundant functionality. 


For example, the progressive disclosure triangles used by the tree view control are only 6x9 pixels, but their 
functionality is redundant with their associated item labels. 


4 B® Desktop 
)) Public 
(™ Computer 
& Network 
Control Panel 
®) Recycle Bin 
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The tree view triangles are too small to be easily touchable, but they are redundant in functionality with their 


larger associated labels. 


- Respect system metrics. Use system metrics for all sizes—don't hardwire sizes. If necessary, users can change the system metrics 
or dpi to accommodate their needs. However, treat this as a last resort because users shouldn't normally have to adjust system 


settings to make UI usable. 


| Go | Tools Actions Help 


Ctrl+3 


ted = Mail 


Tools Actions Help 


=) Calendar  Ctrl+2 


Ctrl+1 


a sj Contacts Ctrl+3 
rl+4 

Ctrl+5 A Tasks Ctrl+4 
Folder List Ctrl+6 | Notes Ctrl+5 


Shortcuts  Ctrl+7 


Folder List Ctri+6 
[4] Shortcuts  Ctrl+7 
47 Journal Ctrl+8 
Ctrl+Y 


Journal Ctrl+8 
Folder... Ctrl+¥ 


Folder... 


In this example, the system metric for menu height was changed. 
Control layout and spacing 


Choose a layout that places controls close to where they are most likely going to be used. Keep task interactions within a small 
area whenever possible. Avoid long distance hand movements, especially for common tasks and for drags. 


Use the recommended spacing. The recommended spacing is touch-friendly. However, if your program can benefit from larger 
sizing and spacing, consider the recommended sizing and spacing to be minimums when appropriate. 


Interactive controls should either be touching or preferably have at least 5 pixels (3 DLUs) of space between them. Doing so 
prevents confusion when users tap outside their intended target. 


Consider adding more than the recommended vertical spacing within groups of controls, such as command links, check boxes, 
and radio buttons, as well as between the groups. Doing so makes them easier to differentiate. 


Consider adding more than the recommended vertical spacing dynamically when an action is initiated using touch. Doing so 
makes objects easier to differentiate, but without taking more space when using a keyboard or mouse. Increase the spacing by a 
third of its normal size or at least 8 pixels. 
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@ Unpin this program from taskbar f Unpin this program from taskbar 


In this example, Windows 7 taskbar Jump Lists are more spacious when displayed using touch. 


Interaction 


Make hover redundant. Take full advantage of hover, but only in ways that are not required to perform an action. This usually 
means that the action can also be performed by clicking, but not necessarily in exactly the same way. Hover isn't supported by 
most touch technologies, so users with such touchscreens can't perform any tasks that require hovering. 


For programs that need text input, fully integrate the touch keyboard feature by: 
o Providing appropriate default values for user input. 


o Providing auto-complete suggestions when appropriate. 


Developers: For more information about integrating the touch keyboard, see ITextInputPanelinterface. 


Allow users to zoom the content UI if your program has tasks that require editing text. Consider automatically zooming to 150 
percent when touch is used. 


Provide smooth, responsive panning and zooming wherever appropriate. Redraw quickly after a pan or zoom to remain 
responsive. Doing so is necessary to make direct manipulation feel truly direct. 


During a pan or zoom, make sure that the contact points stay under the finger throughout the gesture. Otherwise, the pan or 
zoom is difficult to control. 


Because gestures are memorized, assign them meanings that are consistent across programs. Don't give different meanings to 
gestures with fixed semantics. Use an appropriate program-specific gesture instead. 


Windows Touch gestures 


Use the following gestures whenever applicable to your program. These gestures are the most useful and natural. 


- Panning 
Entry state: One or two fingers in contact with the screen. 
Motion: Drag, with any additional fingers remaining in same position relative to each other. 
Exit state: Last finger up ends the gesture. 


Effect: Move the underlying object directly and immediately as the fingers move. Be sure to keep the contact point under the 
finger throughout the gesture. 
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The pan gesture. 


- Zoom 
Entry state: Two fingers in contact with the screen at the same time. 
Motion: Fingers move apart or together (pinch) along an axis. 
Exit state: Any finger up ends the gesture or the fingers break the axis. 
Effect: Zoom the underlying object in or out directly and immediately as the fingers separate or approach on the axis. Be sure to 
keep the contact points under the finger throughout the gesture. 


The zoom gesture. 


If animated carefully, allowing users to zoom while panning can be a powerful, efficient interaction. 


Rotate 

Entry state: Two fingers in contact with the screen at the same time. 

Motion: One or both fingers rotate around the other, moving perpendicular to the line between them. 

Exit state: Any finger up ends the gesture. 

Effect: Rotate the underlying object the same amount as the fingers have rotated. Be sure to keep the contact points under the 
finger throughout the gesture. 


i at 


Cas 


- i 
a 


The rotation gesture. 
Rotation makes sense only for certain types of objects, so it's not mapped to a system Windows interaction. 


Rotation is often done differently by different people. Some people prefer to rotate one finger around a pivot 
finger, while others prefer to rotate both fingers in a circular motion. M ost people use a combination of the two, 
with one finger moving more than the other. While smooth rotation to any angle is the best interaction, in many 
contexts, such as photo viewing, it is best to settle to the nearest 90 degree rotation once the user lets go. In 
photo editing, a small rotation can be used to straighten the photo. 


Two-finger tap 

Entry state: Two fingers in contact with the screen at the same time. 

Motion: No motion. 

Exit state: Any finger up ends the gesture. 

Effect: Alternatively zooms or restores the default view for the object between the fingers. 
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The two-finger tap gesture. 


Press and tap 

Entry state: One finger in contact with the screen, followed by a second finger. 
Motion: No motion. 

Exit state: Second finger up ends the gesture. 

Effect: Performs a right click for the object under the first finger. 


The press and tap gesture. 


Forgiveness 


Provide an Undo command. Ideally, you should provide a simple way to undo all commands, but your program may have some 
commands whose effect cannot be undone. 


Whenever practical, provide good feedback on finger down, but don't take actions until finger up. Doing so allows users to 
correct mistakes before they make them. 


Whenever practical, allow users to correct mistakes easily. If an action takes effect on finger up, allow users to correct mistakes 
by sliding while the finger is still down. 


Whenever practical, indicate that a direct manipulation can't performed by resisting the movement. Allow the movement to 
happen, but have the object settle back in place when released to clearly indicate that the action was recognized but can't be 
done. 


Have clear physical separation between frequently used commands and destructive commands. Otherwise, users might touch 
destructive commands accidentally. A command is considered destructive if its effect is widespread and either it cannot be easily 
undone or the effect isn't immediately noticeable. 

Confirm commands for risky actions or commands that have unintended consequences. Use a confirmation dialog box for this 
purpose. 

Consider confirming any other actions that users tend to do accidentally when using touch, and which either go unnoticed or 
are difficult to undo. Normally, these are called routine confirmations and are discouraged based on the assumption that users 


don't often issue such commands by accident with a mouse or keyboard. To prevent unnecessary confirmations, present these 
confirmations only if the command was initiated using touch. 
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Delete Folder 


> Are you sure you want to move this folder to the Recycle Bin? 


Vacation Photos 
Date created: 9/27/2007 4:04 PM 


Routine confirmations are acceptable for interactions that users often do accidentally using touch. 


Developers: You can distinguish between mouse events and touch events using the GetM essageExtralnfo API. 


Documentation 
When referring to touch: 


- Refer to the user's hand when used as an input device as one or more fingers. 
- Refer generically to the keyboard, mouse, trackball, pen, or finger as an input device. 


- Use tap (and double-tap) instead of click when documenting procedures specific to using a finger or pen. Tap means to press the 
screen and then lift before a hold time. It may or may not be used to generate a mouse click. For interactions that don't involve 
the finger or pen, continue to use click. 


- Touchscreen and touchpad are single, compound words. Don't refer to them as touch screen and touch pad. 
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Pen 


All Microsoft ®W indows®applications should be pen enabled. And doing so is easier than you think. 


Design concepts 
Guidelines 
Control usage 
Control sizing, layout, and spacing 
Interaction 
Handedness 
Forgiveness 
Documentation 


Pen input refers to the way Windows lets you interact directly with a computer using a pen. A pen can be used for 
pointing and also for gestures, simple text entry, and capturing free-form thoughts in digital ink. 


The pen used for input has a fine, smooth tip that supports precise pointing, writing, or drawing in ink. The pen 
may also have an optional pen button (used to perform right-clicks) and eraser (used to erase ink). Most pens 
support hover. 


Fine tip Pen button 


A typical pen. 


When the pen is used for handwriting, the user's strokes can be converted to text using handwriting recognition. 
The strokes can be kept just as they were written, with recognition performed in the background to support 
searching and copying as text. Such unconverted strokes are called digital ink. 
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fa Meeting Note - Microsoft Office OneNote 
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Meeting Note 


Drawing fools: When typed or handwritten notes 
eénvey an idea that you are trying to capture, 
use the new drawing tools in OneNote to sketch out 
what you are trying to visualize. Easily draw, rotate, 
and duplicate lines and shapes right on the page 
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An example of ink input. 


Most Windows programs are already pen-friendly in that a pen can be used instead of a mouse, the pen works 
smoothly for most important tasks and interactions, and the program responds to gestures. A program becomes 
handwriting-friendly when it assists with handwritten text input. A program becomes ink-enabled when it can 
handle ink directly, instead of requiring that pen strokes be translated to text or equivalent mouse movements. 
This allows users to write, draw, and add comments in free-flowing, high-quality digital ink. Collecting ink is 
different than collecting mouse events, because ink requires higher resolution and a higher sample rate, and it 
can also add nuance with pressure and tilt. For information about creating handwriting friendly and ink-enabled 
programs, see Integrating Ink and Text Input Using the Pen. 


When positioning a pen, there is less need for a cursor because the tip represents itself. However, for targeting 
assistance, Windows provides a tiny pen cursor that indicates the current pen location. Unlike the mouse pointer 
it replaces, the pen cursor is not needed unless the pen is near the display, so it disappears after a few seconds of 
inactivity to allow an unobstructed view of information. 


Most pen-friendly programs support gestures. A gesture is a quick movement of the pen on a screen that the 
computer interprets as a command, rather than as a mouse movement, writing, or drawing. One of the quickest 
and easiest gestures to perform is a flick. A flick is a simple gesture that results in navigation or an editing 
command. Navigational flicks include drag up, drag down, move back, and move forward, whereas editing flicks 
include copy, paste, undo, and delete. 


All pointers except the busy pointer have a single pixel hot spot that defines the exact screen location of the 
pointer. The hot spot determines which object is affected by the interaction. Objects define a hot zone, which is 
the area where the hot spot is considered to be over the object. Typically, the hot zone coincides with the 
borders of an object, but it may be larger to make interaction easier. 


Because a pen can point more precisely than a finger, if your user interface works well for touch it will also 
work well for a pen. Consequently, this article is primarily focused on adding pen support to programs that have 
already been designed for touch. 


Note: Guidelines related to mouse, touch, and accessibility are presented in separate articles. 
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Design concepts 


Using a pen for input has the following characteristics: 


Natural and intuitive. Everyone knows how to point and tap with a pen. Object interactions are designed to correspond to how 
users interact with objects in the real world in a consistent manner. 


Expressive. Strokes of a pen are easy to control, making writing, drawing, sketching, painting, and annotating easier than doing so 
with a mouse. 


More personal. Just as a handwritten note or signature is more personal than a typed one, using a digitally handwritten note or 
signature is also more personal. 


Less intrusive. Using a pen is silent, and consequently much less distracting than typing or clicking, especially in social situations 
such as meetings. 


Portable. A computer with a pen capability can be more compact because most tasks can be completed without a keyboard, 
mouse, or touchpad. It can be more flexible because it doesn't require a work surface. It enables new places and scenarios for 
using a computer. 


Direct and engaging. Using a pen makes you feel like you are directly interacting with the objects on the screen, whereas using a 
mouse or touchpad always requires you to coordinate hand movements with separate on-screen pointer movements—which 
feels indirect by comparison. 


All Windows programs should have a good pen experience. Users should be able to perform your program's 
most important tasks efficiently using a pen. Some tasks, like typing or detailed pixel manipulation, aren't 
appropriate for a pen, but they should at least be possible. 


Fortunately, if your program is already well designed and is touch-friendly, providing good pen support is easy to 
do. For this purpose, a well-designed program: 


Has good mouse support. The interactive controls have clear, visible affordances, and have hover states for pointer feedback. 
Objects have standard behaviors for the standard mouse interactions (single and double left-click, right-click, drag, and hover). 
The pointer shape changes as appropriate to indicate the type of direct manipulation. 


Has good keyboard support. The program makes users efficient by providing standard shortcut key assignments, especially for 
navigation and editing commands that can also be generated through gestures. 


Has controls large enough for touch. The controls have a minimum size of 23x23 pixels (13x13 dialog units [DLUs]), and the most 
commonly used controls are at least 40x40 pixels (23x22 DLUs). To avoid unresponsive behavior, there should be no small gaps 
between targets—the UI elements should be spaced so that adjacent targets are either touching or have at least 5 pixels (3 DLUs) 
of space between them. 


Is accessible. Uses Microsoft Active Accessibility (M SAA) to provide programmatic access to the UI for assistive technologies. The 
program appropriately responds to theme and system metric changes. 


Works well and looks good in 120 dpi (dots per inch), which is the recommended default display resolution for pen-enabled 
computers. 


Uses common controls. Most common controls are designed to support a good pen experience. If necessary, the program uses 
well-implemented custom controls that are designed to support easy targeting and interactive manipulation. 


Uses constrained controls. When designed for easy targeting, constrained controls like lists and sliders can be better than 
unconstrained controls like text boxes, because they reduce the need for text input. 


Provides appropriate default values. The program selects the safest (to prevent loss of data or system access) and most secure 
option by default. If safety and security aren't factors, the program selects the most likely or convenient option, thereby 
eliminating unnecessary interaction. 


Provides text auto completion. Provides a list of most likely or recently input values to make text input much easier. 


Unfortunately, the converse is also true—if your program isn't well designed, its shortcomings are going to be 
especially obvious to users who use a pen. 


Model for pen interaction 
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If you aren't experienced with using a pen, the best introduction is to learn by doing. Get a pen-enabled 


computer, put the mouse and keyboard aside, and do the tasks that you normally do using just a pen. Be sure to 


try both ink-enabled programs, such as Windows Journal, and programs that aren't ink-enabled. If you have a 
Tablet PC, experiment with holding it in different positions, such as on your lap, lying flat on a table, or in your 


arms while you're standing. Try using it in portrait and landscape orientation, and holding the pen for writing and 


just for pointing, in your left hand as well as your right. 


As you experiment with using a pen, you'll discover that: 


Small controls are difficult to use. The size of the controls greatly affects your ability to interact effectively. Controls that are 


10x10 pixels work reasonably for a pen, but larger controls are even more comfortable to use. For example, spin controls (15x11 


pixels) are too small to use with a pen easily. 


Handedness is a factor. Your hand sometimes covers things that you might want to see or interact with. For example, for right- 


handed users context menus are hard to use if they appear to the right of the click point, so it's better if they appear on the left. 


Windows@allows users to indicate their handedness in the Tablet PC Settings control panel item. 


Task locality helps. While you can move the pointer across a 14-inch screen with a 3-inch mouse movement, using a pen requires 


you to move your hand the full 14 inches. Repeatedly moving between targets that are far apart can be tedious, so it's much 
better to keep task interactions within the range of a resting hand whenever possible. Context menus are convenient because 


they require no hand movement. 


Text input and selection are difficult. Lengthy text input is especially difficult using a pen, so auto-completion and acceptable 


default text values can really simplify tasks. Text selection can also be quite difficult, so tasks are easier when they don't require 


precise cursor placement. 


Small targets near the edge of the display can be very difficult to tap. Some display bezels protrude, and some touchscreen 


technologies are less sensitive at the edges, making controls near the edge harder to use. For example, the Minimize, M aximize/ 


Restore, and Close buttons on the title bar can be harder to use when a window is maximized. 
Control location 


Task locality reduces tedious repeating cross-screen movements. To minimize hand movements, locate controls 
close to where they are most likely going to be used. 


Incorrect: 


a @ CSRS 8 ee 
—lT CET See B) Se 


In this example from Windows XP, the color palette is too far from where it is likely to be used. 


Consider that the user's current location is the closest a target can be, making it trivial to acquire. Thus, context 
menus take full advantage of Fitts' Law, as do the mini-toolbars used by Microsoft Office. 
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= -) = . 
Links UX Guid 
Status Bar 
Lock the Toolbars 


Use Large Icons 


Customize Command Bar > 


The current pointer location is always the easiest to acquire. 


Small targets near the display edge can be difficult to target, so avoid placing small controls near window edges. 
To ensure that controls are easy to target when a window is maximized, either make them at least 23x23 pixels 
(13x13 DLUs), or place them away from the window edge. 


Pen interactions 
System gestures 


System gestures are defined and handled by Windows. As a result, all Windows programs have access to them. 
These gestures have equivalent mouse, keyboard, and application command messages: 


[System gesture |Synthesized equivalent message 


[Hover (when supported) = Muse hover 
[Double tap (down anduptwice) = [Mouse double left-click 
|Press and hold (down, pause, up) [M ouse right-click 


[Select (down, move over selectable objects, up) IM ouse select 


Developers: For more information, see SystemGesture Enumeration. 


Flicks 


Flicks are simple gestures that are roughly the equivalent of keyboard shortcuts. Navigational flicks include drag 
up, drag down, move back, and move forward. Editing flicks include copy, paste, undo, and delete. To use flicks, 
your program only needs to respond to the related keystrokes commands. 


The eight flick gestures and their default assignments in Windows 7. The navigation flicks were changed to 
correspond to panning (where the object moves with the gesture) instead of scrolling (where the object moves in 
the opposite direction of the gesture). 
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The eight flick gestures and their default assignments in Windows Vista. 


The navigational flicks have natural mapping, so they are easy to learn and remember. The editing flicks are 
diagonals that require more precision and their mappings are not as natural (flick towards the Recycle Bin to 
delete, flick in the Back arrow direction to undo), so these aren't enabled by default. All flick actions can be 
customized using the Pen and Input Devices control panel item. 


|Flick |Synthesized equivalent message 


[Flickleft Forward command (Back command for Windows Vista) 

Flickup = Keyboard ScrollDown 
[Flick down |Keyboard Scroll Up 

[Flick up-left diagonal = Keyboard Delete 


[Flick up-right diagonal |Keyboard Copy 


Flick down-right diagonal Keyboard Paste 


Application gestures 


Applications can define and handle other gestures as well. The Microsoft Gesture Recognizer can recognize over 
40 gestures. To use application gestures, your program must define the gestures it recognizes, and then handle 
the resulting events. 


Responsiveness and consistency 


Responsiveness is essential for creating pen experiences that feel direct and engaging. To feel direct, gestures 
must take effect immediately, and an object's contact points must stay under the pen smoothly throughout the 
gesture. Any lag, choppy response, loss of contact, or inaccurate results destroys the perception of direct 
manipulation and also of quality. 


Consistency is essential for creating pen experiences that feel natural and intuitive. Once users learn a standard 
gesture, they expect that gesture to have the same effect across all applicable programs. To avoid confusion and 
frustration, never assign non-standard meanings to standard gestures. Instead, use custom gestures for 
interactions unique to your program. 


Editing ink and text 
Editing ink and text are among the most challenging interactions when using a pen. Using constrained controls, 
appropriate default values, and auto-completion eliminates or reduces the need to input text. But if your 


program involves editing text or ink, you can make users more productive by automatically zooming input UI up 
to 150 percent by default when a pen is used. 


For example, an e-mail program could display UI at normal size, but zoom the input UI to 150 percent to compose 
messages. 
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Hello - M... 


Message | Insert © Options = FormatText 9 © 


ee Oo oe, 
<4 
Paste Basic Names | Include Options Spelling 


~ SF tet~ . 
Clipboard = | | | Proofing 


This message has not been sent. 


In this example, the input UI is zoomed to 150 percent. 


If you do only four things... 

1. Make your Windows programs have a good pen experience! Users should be able to perform your program's 
most important tasks efficiently using a pen (at least those tasks that don't involve a lot of typing or detailed pixel 
manipulation). 

2. Consider adding support for writing, drawing, and adding comments directly using ink in the most relevant 
scenarios. 


3. To 


create a direct and engaging experience, have gestures take effect immediately, keep contact points under 


the user's pen smoothly throughout the gesture, and have the effect of the gesture map directly to the user's 
motion. 


4. To 


create a natural and intuitive experience, support appropriate standard gestures and assign them their 


standard meanings. Use custom gestures for interactions unique to your program. 


Guidelines 


Control usage 


Prefer using common controls. M ost common controls are designed to support a good pen experience. 
Prefer constrained controls. Use constrained controls like lists and sliders whenever possible, instead of unconstrained controls 
like text boxes, to reduce the need for text input. 


Provide appropriate default values. Select the safest (to prevent loss of data or system access) and most secure option by 
default. If safety and security aren't factors, select the most likely or convenient option, thereby eliminating unnecessary 
interaction. 


Provide text auto-completion. Provide a list of most likely or recently input values to make text input much easier. 
For important tasks that use multiple selection, if a standard multiple-selection list is normally used, provide an option to use 
a check box list instead. 


Respect system metrics. Use system metrics for all sizes—don't hardwire sizes. If necessary, users can change the system metrics 
or dpi to accommodate their needs. However, treat this as a last resort because users shouldn't normally have to adjust system 
settings to make UI usable. 
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Tools Actions Help 
bq Mail Ctrl+1 


83) Contacts Ctrl+3 


Tools Actions Help 
bj Mail Ctrl+1 


=a} Calendar  Ctrl+2 


sj Contacts Ctri+3 


A Tasks Ctrl+4 
jn] Notes Ctrl+5 A Tasks Ctrl+4 
Ga FolderList Ctri+6 J) Notes Ctrl+5 


| [@] Shortcuts Ctrl+7 
9 Journal Ctrl+8 
Folder... Ctrl+¥ 


La FolderList Ctrl+6 
(@] Shortcuts  Ctrl+7 
M7 Journal Ctrl+8 
Ctrl+Y 


Folder... 


In this example, the system metric for menu height was changed. 
Control sizing, layout, and spacing 


For common controls, use the recommended control sizes. These are large enough for a good pen experience, except for spin 
controls (which aren't usable with a pen but are redundant). 


Choose a layout that places controls close to where they are most likely going to be used. Keep task interactions within a small 
area whenever possible. Avoid long distance hand movements, especially for common tasks and for drags. 


Use the recommended spacing. The recommended spacing is pen-friendly. 


Interactive controls should either be touching or preferably have at least 5 pixels (3 DLUs) of space between them. Doing so 
prevents confusion when users tap outside the intended target. 


Consider adding more than the recommended vertical spacing within groups of controls, such as command links, check boxes, 
and radio buttons, as well as between the groups. Doing so makes them easier to differentiate. 


Interaction 


- For programs designed to accept handwriting, enable default inking. Default inking allows users to input ink by just starting to 
write, without having to tap, give a command, or do anything special. Doing so enables the most natural experience with a pen. 
For programs not designed to accept handwriting, handle pen input in text boxes as selection. 


- Allow users to zoom the content UI if your program has tasks that require editing text. Consider automatically zooming to 150 
percent when a pen is used. 


- Because gestures are memorized, assign them meanings that are consistent across programs. Don't give different meanings to 
gestures with fixed semantics. Use an appropriate program-specific gesture instead. 


Handedness 


- Ifa window is contextual, always display it near the object that it was launched from. Place it out of the way so that the source 
object isn't covered by the window. 
o If displayed using the mouse, when possible place the contextual window offset down and to the right. 


© 2010, Microsoft Corporation. All rights reserved. Page 458 of 882 


Show contextual windows near the object that it was launched from. 


o If displayed using a pen, when possible place the contextual window so as not to be covered by the user's hand. For right- 
handed users, display to the left; otherwise display to the right. 


= 


When using a pen, also show contextual windows so that they aren't covered by the user's hand. 


- Developers: You can distinguish between mouse events and pen events using the GetM essageExtralnfo API. You can determine 
the user's handedness using the SystemParametersInfo API with SP! GETMENUDROPALIGNM ENT. 


Forgiveness 


Provide an undo command. Ideally, you should provide undo for all commands, but your program may have some commands 
whose effect cannot be undone. 


Provide good hover feedback. Clearly indicate when the pen is over a clickable target. Such feedback is a great way to prevent 
accidental manipulation. 


Whenever practical, provide good feedback on pen down, but don't take actions until a move or pen up. Doing so allows users 
to correct mistakes before they make them. 


Whenever practical, allow users to correct mistakes easily. If an action takes effect on pen up, allow users to correct mistakes by 
sliding while the pen is still down. 


Documentation 
When referring to pen input: 


- Refer to a pen-shaped stylus input device as a pen. On first mention, use tablet pen. 
- Refer to the button on the side of a pen as the pen button, not the barrel button. 
- Refer generically to the keyboard, mouse, trackball, pen, or finger as an input device. 


- Use tap (and double-tap) instead of click when documenting procedures specific to using a pen. Tap means to press the screen 
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and then lift before a hold time. It may or may not be used to generate a mouse click. For interactions that don't involve the pen, 
continue to use click. 
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Accessibility 


Design concepts 
Guidelines 
General 
Addressing particular impairments 
Access keys 
Menu access keys 
Dialog box access keys 
Text 
Documentation 


Designing software for accessibility means ensuring that programs and functionality are easily available to the 
widest range of users, including those who have disabilities and impairments. 


The number of users that accessibility features can help may surprise you; for example, in the United States, 
surveys have shown that more than half of all computer users experience difficulties or impairments related to 
accessibility, and are likely to benefit from the use of accessible technology. Moreover, approaching software 
design with the flexibility and inclusiveness that are the hallmarks of accessibility often results in overall 
improved usability and customer satisfaction. 


‘€) we (a) « Ease of Access >» Ease of Access Center v | 


Control Panel Home i 
Make your computer easier to use 


(a) ink - = > 
ange aire Quick access to common tools 


You can use the tools in this section to help you get 
started. 


Windows can read and scan this list automatically. 
Press the SPACEBAR to select the highlighted tool. 


¥|Alwaysreadthis = [| Always scan this section 
section aloud 


Start Start 
Magnifier Narrator 


Start ge. Set up High 
On-Screen Contrast 
Keyboard 


The Ease of Access Center, available from Control Panel, provides a central location where users can choose and 
customize the accessibility features they want. 


Note: Guidelines related to keyboard, mouse, color, and sound are presented in separate articles. 


Design concepts 


Many physical, perceptual, and cognitive factors come into play when users interact with computer hardware 
and software. Before considering ways to make your program's features more accessible, it helps to learn about 
what kinds of disabilities and impairments exist, and some of the assistive technologies these users may be 
working with as they interact with computers. 
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Types of impairments 


The following table describes common user disabilities and impairments, and lists a few of the most important 
solutions used to make computers more accessible. 


For more guidelines about helping users with these impairments, see Addressing particular impairments later in 
this article. 


Types of assistive technologies and accessibility features 
Screen readers 


A screen reader enables users with visual disabilities or impairments to navigate a UI by transforming visuals to 
audio. Thus, UI text, controls, menus, toolbars, graphics, and other screen elements are spoken by the 
computerized voice of the screen reader. To create a program optimized for screen reader assistive technology, 
you must plan for how the screen reader will identify each UI element. 


Each UI element that the user can interact with must be keyboard accessible, as well as be exposed through an 
accessibility application programming interface (API). We recommend using Microsoft®U! Automation, the new 
accessibility framework for all versions of Microsoft Windows®that support Windows Presentation Foundation 
(WPF). UI Automation provides programmatic access to most elements on the desktop, enabling assistive 
technology products such as screen readers to provide information about the UI to users and to manipulate the 
UI by means other than standard input (for example, by speaking rather than or in addition to manipulating the 
mouse or keyboard). For more information, see the UI Automation Overview. 


Be aware that although screen readers are a very important assistive technology, there are others as well. For 
more information about the range of technologies available, see Types of Assistive Technology Products. 


Speech recognition 
Speech recognition is an accessibility feature in Windows®that allows users to interact with their computers by 
voice, reducing the need for motor interaction with the mouse or keyboard. Users can dictate documents and e- 


mail, use voice commands to start and switch between programs, control the operating system, and even fill out 
forms on the Web. 


Magnifier 
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Impairment Description Solutions 

Visual Ranges from mild (affecting 17 percent of | Customizable magnification, colors, and 
users) to severe (affecting 9 percent of contrast; Braille utilities; screen readers. 
users). 

Hearing Ranges from mild (affecting 18 percent of —|Information redundancy: sound used only as 
users) to severe (affecting 2 percent of supplement to text or visual communication. 
users). 

Dexterity Ranges from mild (affecting 19 percent of {Input method redundancy: program 
users) to severe (affecting 5 percent of features accessed by mouse or keyboard 
users). This impairment often involves equivalents. 
difficulty performing certain motor skills 
with keyboard or mouse. 

Cognitive Includes memory impairments and [Highly-customizable user interface (UI); use 
perceptual differences. Affects 16 percent _|of progressive disclosure to hide 
of users. complexity; use of icons and other visual 

aids. 

Seizure Includes visual sensitivity to movement Conservative approach to modulating 
and flashing. interfaces, such as the use of animations; 

avoiding screen flicker in the range between 
2 Hertz (Hz) and 55 Hz. 

Speech or language |Includes dyslexia and oral communication | Spell-check and grammar-check utilities; 
difficulties. speech recognition and text-to-speech 

technology. 
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Magnification helps users with low vision by enlarging items on screen anywhere from 2 to 16 times the original. 
Users can set this feature to track the mouse (to see an enlarged version of what the mouse is pointing to), the 
keyboard (to see the area where the pointer moves when tabbing), or text editing (to see what they are typing). 


Visual settings and color schemes 


In addition to making things on the screen larger, users with visual impairment may benefit from system settings 
such as high-contrast mode or the ability to customize background and foreground color schemes. 


Narrator 


Narrator is a scaled-down screen reader in Windows that allows users to hear on-screen text and UI elements 
read aloud, even including some events (including error messages) that happen spontaneously. The user can hear 
the Narrator menus without leaving the active window. 


“dk Microsoft Narrator 


File Preferences Help 


Narrator will read aloud what is on-screen as you 
navigate using the keyboard. 


Main Narrator Settings 


(¥] Echo User's Keystrokes 


(¥] Announce System Messages 
[| Announce Scroll Notifications 


[] Start Narrator Minimized 


Control whether Narrator starts when I log on 


ce 


Users can customize the extent to which M icrosoft Narrator is used. 

On-screen keyboard 

For users who have difficulty with physical keyboards, and need to use an alternative input device such as a 
switch, on-screen keyboards are a necessity. Users can select keys using the mouse or another pointing device, a 
small group of keys, or just one key, depending on how you set up On-Screen Keyboard. 


Mouse keys 


With M ouse Keys enabled, users who prefer the keyboard can use the arrow keys on the numeric keypad to 
move the mouse pointer. 


For acomplete list of accessibility features, see Accessibility in Windows Vista on the Microsoft Web site. 


Keyboard-based navigation 


The Tab key, arrow keys, space bar, and Enter key are important for keyboard-based navigation. Pressing Tab 
cycles input focus through the different control groups, and pressing the arrow keys moves within a control or 
among controls within a group. Pressing space bar is the same as clicking the control with input focus, whereas 
pressing Enter is the same as clicking the default command button or command link, regardless of input focus. 
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Organize v 


wr Favorites 
BB Desktop 
B Downloads 


Empty the Recycle Bin 


- 


; 
| Recent Places | 


Libraries 


=«| Documents 


@) Music 

le! Pictures 
— 

*. 4 

a 


In this example, users can press Tab until the desired option has input focus, then press Enter to open the object. 


Access keys 


Access keys allow users to choose options and initiate commands directly without having to navigate to the 
control first. Access keys are indicated by underlining one of the characters in each control's label. Users then 
activate the option or command by pressing the Alt key along with the underlined character. Access keys aren't 


case sensitive. 


| New Text Document - Notepad 
Edit Format View Help 


New 


Save 


Save As... 


Page Setup... 


Print... 


Exit 


In this example, pressing Alt+O activates the Open command. 


Choosing logical access keys for controls usually poses no difficulty; the more controls there are on a window, 
however, the greater the possibility you will run out of access key choices. In this case, assign access Keys to 


Ctrl+N 
Ctrl+O 
Ctrl+S 


control groups rather than each individual one. 
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Ei Color Management 


| Devices | All profiles | Advanced 


Windows color system defaults 


Device profile: | System default (sRGB IEC61966-2.1) 


s) 


Viewing conditions profile: System default (WCS profile for sRGB viewing conditions) . 


ICC rendering intent to WCS gamut mapping 


Default rendering intent: System default (Perceptual) 


—) 


Perceptual (photo images): System default (Photography) ’ 


Relative Colorimetric (line art): System default (Proofing and line art) 


= 


Absolute Colorimetric (simulate paper): System default (Proofing - simulate paper/media color) = 


Defaults. 


(@) Change System Defaults... 


Business Graphics (charts and graphs): System default (Charts and graphs) = 


Color settings are stored separately for each user. To make changes for new users and shared printers, click Change System 


In this example, access keys are assigned to control groups, rather than individual controls. 

Access keys are often confused with shortcut keys, but shortcut keys are assigned differently from access keys 
and have different goals. For example, shortcut keys use Ctrl and Function key sequences and are intended 
primarily as a shortcut for advanced users instead of for accessibility. 


For more information, see Keyboard. 


Designing for accessibility: three fundamental practices 


Accessible programs help all users in some way because the objectives of accessibility and usability overlap. For 
example, features designed to make advanced users as efficient as possible also benefit users who prefer using 
the keyboard because of dexterity impairment. 


Three fundamental practices will help you with accessible design: allow for a degree of flexibility in your UI, let 
respect for user needs and preferences play a major role in design decisions, and provide programmatic access to 
your UI. 

Providing flexible UI 

Accessible design is, at least in part, about giving users choices. Not a frustrating, dizzying array of choices, but a 
limited number of choices that smartly anticipates user needs. "Don't like navigating by way of the mouse? Here, 
you can do the very same things using only the keyboard. Don't like physical keyboards? Here's a virtual one you 
can use on-screen." 


For example, provide flexibility by: 
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- Providing user-selectable equivalents for non-text elements (for example, alt text for graphics and captions for audio). 


| Click to sign in to your 
Passport account. 


Users who have chosen not to render graphics should see alt text instead, describing what the control does and 
how to interact with it. 


- Providing alternatives to color (for example, icon differentiation or the use of sounds). 


In this example, the standard icons are readily distinguishable based on their designs. 


- Ensuring keyboard access (for example, a tab stop for every interactive control) so that users can accomplish the same things in 
your program with either the mouse or the keyboard. 


- Ensuring that your program offers good color contrast options for users. Windows provides a high contrast option, but that's 
really designed to be a solution for severe visual impairment. Other contrast options best serve users with mild impairment, such as 
low vision and color blindness. To determine if your program's use of color is accessible and not used as a primary method 
of communication, we recommend using the Fujitsu ColorDoctor or the Vischeck utilities. 


- Ensuring that users have a way to adjust the size of text in your program's UI (for example, through a slider control or drop-down box 
for font size). If possible, support high dots per inch (dpi) mode. 


- Ensuring that your program is multimodal, meaning that if the primary mode of the program is inaccessible for some, these users have 
a way to work around the problem. For example, when animation is displayed, the information should be displayable in at least one 
non-animated presentation mode at the option of the user. 


Multimodal interfaces and flexible navigation essentially offer the user the architecture of information 
redundancy. Redundancy sometimes has negative connotations; in user interface text, for example, we advise 
removing redundancy to streamline the reading experience. But in the context of accessibility, redundancy 
connotes positive, fail-safe mechanisms and experiences. 


Respecting your users 


Respect as a general, guiding principle is vital for designing accessible programs. Even as an intellectual exercise, 
imagine what it must be like to encounter your program as a user who is disabled. Take the time to test UI 
screens in high contrast mode and at various resolutions, to ensure the experience is a good one for users with 
visual impairments. Test keyboard accessibility by selecting the Underline keyboard shortcuts and access keys 
check box in the Ease of Access Center Control Panel item (so that access keys are always visible). You can even 
go beyond rigorous testing by hiring developers and designers who have a natural aptitude for empathizing with 
others to begin with. 


You should also demonstrate respect by: 


- Using system-wide settings (for example, System Color) rather than hardwiring settings for your particular program. Respect not 
only the parameters that users have specifically selected for interacting with their programs, but also accessibility features built into 
the operating system that the user wants in effect no matter which program they are using. For more information, see About 


Windows Accessibility Features. 
- Preferring common controls to custom controls, because common controls have already implemented the Windows accessibility APIs. 


- Documenting all accessibility options and features (for example, all keyboard shortcuts). Users with impairments are highly motivated 
to discover accessibility features, and often expect comprehensive information to be collected in Help. 


- Creating accessible documentation in accessible formats. Thus, the documentation itself should adhere to the same rules of 
accessibility as the primary UI, including the ability to enlarge font size, the use of alt text for graphics, and redundant 
information architecture (for example, using color-coding only as a supplement to text). 
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In software products, respect for users may manifest itself in usability and market research, in efficacious support 
services and documentation, and of course in design decisions. For example, thinking again in terms of design for 
advanced users: are you putting that cutting-edge new feature in because you want it, or because you know that 
your advanced users have been asking for it? The latter case indicates that your design decision-making process is 
well-informed by the value of respect. 


Providing programmatic access 


Providing programmatic access to the UI is essential so that assistive technologies (such as screen readers, 
alternative input devices, and speech recognition programs) interpret the screen correctly for their users. By 
creating a "map" of each UI screen in your program, you make it available to users of assistive technologies. 


Do this well by: 


« Enabling programmatic access to all Ul elements and text (for example, using the Active Accessibility COM interface, lAccessible). 
- Placing names (or titles) and descriptions on UI objects, frames, and pages (for example, using the lAccessible Name property). 
- Ensuring programmatic events are triggered by all UI activities (for example, focus events for all UI activities involving focus movement). 


If you do only four things... 

1. Ensure every user can leverage the full potential of your program. 

2. Think of accessibility as an opportunity for creative problem-solving and another means of increasing overall 
user satisfaction. 

3. Respect system settings. 

4. Use common controls whenever possible. 


Guidelines 
General 


- Don't disrupt or disable activated features of the operating system or other products that are identified as accessibility features. 
You can identify these features by referring to the documentation of the operating system or product in question. 


- Don't force users to interact with your program as the top window on the screen. If a function or a window is required 
continuously for users to perform a task, that window should always remain visible, if the user so chooses, regardless of its 
position relative to other windows. For example, if the user has a movable on-screen keyboard that is on top of all other windows 
so that it is visible at all times, your program should never obscure it by mandatory placement at the top of the Z order. 


- Use system colors, fonts, and common controls whenever possible. By doing so, you significantly reduce the number of 
accessibility issues users encounter. 


Addressing particular impairments 
Visual 


- Never rely on color alone to convey meaning. Use color only as a means of reinforcing the meaning provided by text, design, 
location, or sound. 


Communicator - Signed in (Busy) 


The primary method of communication in this example is the concise tooltip text. The use of color assists in 
communicating the meaning, but is secondary. 


- Use alternative (alt) text infotips to describe graphics. 


- Don't use text in graphics. Users with visual impairments may have graphics turned off (for example, in a Web browser), or may 
simply not see or look for text placed in graphics. 


- Ensure that dialog boxes and windows have meaningful names, so that a user who is hearing rather than seeing the screen 
(for example, using a screen reader) gets appropriate contextual information. 


- Respect the user's settings for visual display by always obtaining font typefaces, sizes, and colors, Windows display element sizes, 
and system configuration settings from the Theme and GetSystemM etrics APIs. 


- Keep balloon text concise so that it is easier to read and minimizes disruption to screen readers. 
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The PIN code may not have more than 4 digits 


Although balloons may use additional body text if necessary, this example shows that sometimes title text alone 
achieves the same goal in a more economical and accessible way. 


Hearing 


- Never rely on sound alone to convey meaning. Use sound only as a means of reinforcing the meaning provided by text, 
design, location, or color. 


- Enable users to control the volume of audio output. Use the Windows Volume Mixer for this purpose. For more information, 
see Sound. 


- Target your program's sound to occur in a range between 500 Hz and 3000 Hz or be easily adjustable by the user into that 
range. Sounds in this range are most likely to be detectable by people with hearing impairment. 


Dexterity 


- Make UI timeout values relative to GetDoubleClickTime() instead of using absolute times. Doing so adjusts the timeouts to the 
speed of the user. 


- Assign access keys to all menu items so that users who prefer working with the keyboard have the same ability to navigate 
your program as users who work with the mouse. 


- Don't make double-clicking and dragging the only way to perform an action. These can be difficult movements for some users. 


- Don't remove menu bars from your program. M enu bars are easier than toolbars for keyboard users to access. If you don't want 
the menu bar visible by default, hide it instead. 


- Make Help accessible from the keyboard by providing tab stops for Help buttons and links. 


- To improve awareness of the access key assignments in your program, you can display them at all times. In Control Panel, go to 
the Ease of Access Center, and click Make the keyboard easier to use; then select the Underline keyboard shortcuts and access 
keys check box. 


Cognitive 


- Use progressive disclosure to hide complexity. 


Organize v iS Ee] Preview | v 
& Cut 
» Copy [e] Preview | v 
Paste [3] Microsoft Birice Picture Manager 
Undo fw Microsoft Office Word 
Redo a Paint 
eal Windows Live Photo Gallery 
e Windows Media Center 
HL} Layout é jE] Windows Photo Viewer 
Folder and search options 
Choose default program... 
7\ Delete 
Rename 


Remove properties 


Properties 


Close 


In these examples, options available from the command button are hidden by default, and users can choose to 
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view the options by taking advantage of progressive disclosure controls. 


- Use icons, toolbars, and other visual aids to reduce cognitive load of reading text. 


- When possible, provide auto-complete functionality in text boxes and editable drop-down lists, so that users don't have to type 
the entire name of commands, file names, or similar choices from a limited set of options. This reduces cognitive load for all users, 
and reduces the amount of typing for users for whom spelling or typing is difficult, slow, or painful. 


- Demonstrate difficult concepts in Help by including tutorials and animations. Note that animations can be difficult for users 
with seizure impairment, and therefore should be used only when necessary. 


Seizure 


- Don't use flashing or blinking text, objects, or other elements having a flash or blink frequency in the range between 2-55 Hz. 


- Limit use of animations. Some users are particularly sensitive to screen movement, especially in the periphery of their visual field. If 
you use animation to draw attention to something, make sure that attention is deserved and worthy of interrupting the user. 


Speech or language 


- Organize and write clear, concise, easily understood text. Usability tests show that unfolding key information at the end of a 
phrase improves comprehension. For more guidelines, see Style and Tone. 


Incorrect: 
Is three the next digit? 
Click OK to begin. 


Correct: 
Is the next digit three? 
To begin, click OK. 


Access keys 


- Prefer characters with wide widths, such as w, m, and capital letters. 
- Prefer a distinctive consonant or a vowel, such as "x" in "Exit." 


- Avoid using characters that make the underline difficult to see, such as (from most problematic to least problematic): 
o Characters that are only one pixel wide, such asi and |. 


o Characters with descenders, such as g, j, p, g, and y. 
o Characters next to a letter with a descender. 


Menu access keys 


- Assign access keys to all menu items. No exceptions. 
- For dynamic menu items (such as recently used files), assign access keys numerically. 


él | Uf = | Tulips - Paint 


Recent pictures 


Tulips j 
Penguins 


Lighthouse 


Koala 

Jellyfish 
Hydrangeas 
Desert 
Chrysanthemum 


Accessibility 


oO 10 IN ID i i IW OIm I 


this example, the Paint program in Windows assigns numeric access keys to recently used files. 


In 
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- Assign unique access keys within a menu level. You can reuse access keys across different menu levels. 


- Make access keys easy to find: 
o For the most frequently used menu items, choose characters at the beginning of the first or second word of the label, preferably the 
first character. 


o For less frequently used menu items, choose letters that are a distinctive consonant or a vowel in the label. 
Dialog box access keys 
- Whenever possible, assign unique access keys to all interactive controls or their labels. Read-only text boxes are interactive 
controls (because users can scroll them and copy text), so they benefit from access keys. Don't assign access keys to: 


o OK, Cancel, and Close buttons. Enter and Esc are used for their access keys. However, always assign an access key to a control that 
means OK or Cancel, but has a different label. 


Delete File 


z = Are you sure you want to move this file to the Recycle Bin? 
wd 


Accessibility 
= Type: Microsoft Office Word Document 
r We wees | Size: 862 KB 
| 
hanell ee 


~~ Date modified: 6/3/2009 5:49 PM 


CE eS 


In this example, the positive commit button has an access key assigned. 


o Group labels. Normally, the individual controls within a group are assigned access keys, so the group label doesn't need one. However, 
assign an access key to the group label and not the individual controls if there is a shortage of access keys. 


o Generic Help buttons, which are accessed with F1. 


o Link labels. There are often too many links to assign unique access keys, and link underscores hide the access key underscores. Have 
users access links with the Tab key instead. 


o Tab names. Tabs are cycled using Ctrl+Tab and Ctrl+Shift+Tab. 

o Browse buttons labeled "...". These can't be assigned access keys uniquely. 

o Unlabeled controls, such as spin controls, graphic command buttons, and unlabeled progressive disclosure controls. 
o Non-label static text or labels for controls that aren't interactive, such as progress bars. 


- Assign commit button access keys first to ensure that they have the standard key assignments. If there isn't a standard 
key assignment, use the first letter of the first word. For example, the access key for Yes and No commit buttons should always be 
"Y" and "N", regardless of the other controls in the dialog box. 


- For negative commit buttons (other than Cancel) phrased as a "Don't", assign the access key to the "n" in "Don't". If not phrased as 
a "Don't", use the standard access key assignment or assign the first letter of the first word. By doing so, all Don'ts and No's have 
a consistent access key. 


- To make access keys easy to find, assign the access keys to a character that appears early in the label, ideally the first character, 
even if there is a keyword that appears later in the label. 


For more guidelines and examples, see Keyboard. 
Text 
- Use colons at the end of external control labels. Some assistive technologies look for colons to identify control labels. 


- Position labels consistently relative to the elements that they are labeling. This helps assistive technology correctly associate the 
labels with their corresponding controls, and helps users of screen enlargers know where to look for a label or control. 
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=. Print Pictures 


How do you want to print your pictures? 


Printer: Paper size: Quality: 


Microsoft XPS Document Writer ¥ | [Letter = | /600 x600 dots perinch v | ~ 


In this example, the labels for each of the drop-down lists are placed consistently and use colons. 


- Limit alt text to 150 characters maximum. Describe the action to activate the control (for example, click, right-click, and so on) and 
then describe the control's function. 


Acceptable: 
Button. 
Blue hills. 


Better: 
Click to sign in to your account. 
Photo of distant hills showing how colors fade over distance. 


- Don't use text to draw lines, boxes or other graphical symbols. Characters used in this way can confuse users of screen readers. 
For example, a box drawn with the letter "X" around an area of text is read by screen-reader software as "X X X X X X" on the first 
line, followed by "X" and the content and "X". 


Documentation 


- Document all accessibility options and features (for example, all keyboard shortcuts). 


- Create accessible documentation in accessible formats. Thus, the documentation itself should adhere to the same rules of 
accessibility as the primary UI. 


- Refer to access keys, not shortcut keys (which have a different meaning and use), mnemonic keys, or accelerators. 


- In general, refer to a person with a kind of disability, not a disabled person. Consider the person first, not the label. 
[Use these terms [Instead of 


[Has limited dexterity, has motion disabilities [Crippled, lame 
[Without disabilities Normal, able-bodied, healthy 


One-handed, people who type with onehand __|Single-handed 


People with disabilities The disabled, disabled people, people with handicaps, the 
handicapped 


[Cognitive disabilities, developmental disabilities [Slow learner, retarded, mentally handicapped 
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Windows 


These articles provide guidelines for the different types of windows to use in your Windows®based applications: 


- Window Management 
- Window Frames 

- Dialog Boxes 

- Common Dialogs 

- Wizards 

. Property Windows 
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Window Management 


Design concepts 
Guidelines 
General 
Title bar controls 
Window size 
Window location 
Window order (Z order) 
Window activation 
Input focus 
Persistence 


This article covers default placement of windows when initially displayed on the screen, their stacking order 
relative to other windows (Z order), their initial size, and how their display affects input focus. 


For the following guidelines: 


A top-level window has no owner window and is displayed on the taskbar. Examples: application windows. In Windows Vista® 
and later, dialog boxes without owner windows and property sheets are also considered top-level. 


An owned window has an owner window and isn't displayed on the taskbar. Examples: modal dialog boxes, modeless dialog 
boxes. 


A user-initiated window is displayed as the direct result of a user's action. Otherwise, it is program initiated if initiated by a 
program, or system initiated if initiated by M icrosoft®W indows@ For example, an Options dialog box is user initiated, but a 
meeting reminder is program initiated. 


A contextual window is a user-initiated window that has a strong relationship to the object from which it was launched. For 
example, windows displayed by context menus or notification area icons are contextual, but windows displayed by menu bars are 
not. 


The active monitor is the monitor where the active program is running. 


The default monitor is the one with the Start menu, taskbar, and notification area. 


Design concepts 


Window management is one of the most fundamental user activities. Before Windows Vista, windows were often 
given small default sizes and placed in the middle of the screen. That approach works well for older single, low- 
resolution monitors, but not for modern video hardware. 


Windows is designed to support modern video hardware, which often runs at resolutions significantly higher than 
the minimum supported screen resolution and may have multiple monitors. Doing so: 


- Allows users to benefit fully from their advanced hardware. 
- Requires less effort from users to move their mouse across greater distances. 
- Makes window placement more predictable and therefore easier to find. 


The minimum supported screen resolution 
The minimum effective screen resolution supported by Windows is 800x600 pixels. This means that fixed size 
windows should display fully at the minimum resolution (while reserving space for the taskbar), but resizable 


windows can be optimized for an effective resolution of 1024x768 pixels as long as they are functional at the 
minimum resolution. 


While currently the most common physical screen resolutions for Windows PCs are 1024x768 pixels or greater, 
targeting 800x600 pixels allows Windows to: 
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- Work well with all modern hardware, including small notebook PCs. 
- Support high dpi (dots per inch) settings. 

- Support larger fonts for accessibility. 

- Support hardware used on a global basis. 


Choosing the minimum resolution to support requires striking the right balance. Targeting a higher resolution 
would result in a suboptimal experience for a significant percentage of modern hardware, whereas targeting a 
lower resolution would prevent designers from taking full advantage of the available screen space. 


If you believe that your target users are using significantly higher resolutions than the Windows minimum, you 
can design your program to take full advantage of the extra screen space by using resizable windows that scale 
well. 


Guidelines 
General 


Support the minimum Windows effective resolution of 800x600 pixels. For critical user interfaces (UIs) that must work in safe 
mode, support an effective resolution of 640x480 pixels. Be sure to account for the space used by the taskbar by reserving 48 
vertical relative pixels for windows displayed with the taskbar. 


Optimize resizable window layouts for an effective resolution of 1024x768 pixels. Automatically resize these windows for lower 
screen resolutions in a way that is still functional. 


Be sure to test your windows in 96 dpi (100 percent) at 800x600 pixels, 120 dpi (125 percent) at 1024x768 pixels, and 144 dpi 
(150 percent) at 1200x900 pixels. Check for layout problems, such as clipping of controls, text, and windows, and stretching of 
icons and bitmaps. 


For programs with touch and mobile use scenarios, optimize for 120 dpi. High-dpi screens are currently prevalent on touch and 
mobile PCs. 


Resizable windows no longer must show the resize glyph in the lower-right corner, because: 
o All sides and edges of a window are resizable, not just the lower-right corner. 


o The glyph requires a status bar to display, yet many resizable windows don't provide status bars. 


o The resizable window borders and resize pointers are more effective at communicating that a window is resizable than 
the resize glyph. 


Title bar controls 
Use the title bar controls as follows: 


- Close. All primary and secondary windows with a standard window frame should have a Close button on the title bar. Clicking 
Close has the effect of canceling or closing the window. 


Power Options 


A Are you sure you want to restore this 
plan's default settings? 


Clicking 'Yes' immediately restores all of the plan's 
default settings. 


In this example, the dialog box doesn't have a Close button in the title bar. 


- Minimize. All primary windows and long-running modeless secondary windows (such as progress dialogs) should have a Minimize 
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button. Clicking Minimize reduces the window to its taskbar button. Consequently, windows that can be minimized require a title 
bar icon. 


Maximize/ Restore down. All resizable windows should have a M aximize/ Restore down button. Clicking M aximize displays the 
window in its largest size, which for most windows is full screen; whereas clicking Restore down displays the window in its 
previous size. However, some windows don't benefit from using a full screen, so these windows should maximize to their largest 
useful size. 


Window size 


Choose a default window size appropriate for its contents. Don't be afraid to use larger initial window sizes if you can use the 
space effectively. 


Use resizable windows whenever practical to avoid scroll bars and truncated data. Windows with dynamic content and lists 
benefit the most from resizable windows. 


For text documents, consider a maximum line length of 65 characters to make the text easy to read. (Characters include letters, 
punctuation, and spaces.) 


Fixed-sized windows: 
o Must be entirely visible and sized to fit within the work area. 


Resizable windows: 
May be optimized for higher resolutions, but sized down as needed at display time to the actual screen resolution. 


ie) 


For progressively larger window sizes, must show progressively more information. M ake sure that at least one window 
portion or control has resizable content. 


eo) 


Should avoid default restored sizes that are maximized or near maximized. Instead, choose a default size that is typically 
the most useful without being full screen. Assume that users will maximize the window instead of resizing to make it full 
screen. 


ie) 


Should set a minimum window size if there is a size below which the content is no longer usable. For resizable controls, 
set minimum resizable element sizes to their smallest functional sizes, such as minimum functional column widths in list 
views. 


ie) 


Should change the presentation if doing so makes the content usable at smaller sizes. 


ie) 


[5 Windows Media Player 


Bien Dnpein) 40 - 


In this example, Windows M edia®Player changes its format when the window becomes too small for the 
standard format. 


Window location 


For the following guidelines, "centering" means to bias vertical placement slightly towards the top of the monitor, instead of 
placing exactly in the middle. Put 45 percent of the space between the top of the monitor/owner and the window top, and 55 
percent between the bottom of the monitor/owner and the window bottom. Do this because the eye is naturally biased towards 
the top of the screen. 
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"Centering" means to bias vertical placement slightly towards the top of the monitor. 


- Ifa window is contextual, always display it near the object that it was launched from. Place it out of the way so that the source 
object isn't covered by the window. 
o If displayed using the mouse, when possible place it offset down and to the right. 


Show contextual windows near the object that it was launched from. 


© 2010, Microsoft Corporation. All rights reserved. Page 476 of 882 


Windows launched from notification area icons are displayed near the notification area. 


o If displayed using a pen, when possible place it so as not to be covered by the user's hand. For right-handed users, display 
to the left; otherwise display to the right. 


zz 


When using a pen, also show contextual windows so that they aren't covered by the user's hand. 


Developers: You can distinguish between mouse events and pen events using the GetM essageExtralnfo API. You 
can determine the user's handedness using the SystemParametersinfo API with SPI_GETM ENUDROPALIGNM ENT. 


- Place progress dialogs out of the way in the lower-right comer of the active monitor. 


Place progress dialogs in the lower-right corner. 


- Ifa window isn't related to the current context or user action, place it away from the current pointer location. Doing so 
prevents accidental interaction. 


- Ifa window isa top-level application or document, always cascade its origin off the upper-left corner of the monitor. If created 
by the active program, use the active monitor; otherwise, use the default monitor. 
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oo 


1 
Cascade top-level application or document windows off the upper-left corner of the monitor. 


- Ifa window isa top-level utility, always display it "centered" in the monitor. If created by the active program, use the active 
monitor; otherwise, use the default monitor. 


Center top-level utility windows. 


- Ifa window is an owned window, initially display it "centered" on top of the owner window. For subsequent display, consider 
displaying it in its last location (relative to the owner window) if doing so is likely to be more convenient. 
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Initially center owned windows on top of the owner window. 


- For modeless dialogs, always display initially on top of the owner window to make them easy to find. However, if the user 
activates the owner window, that may obscure the modeless dialog. 


_ 


Display modeless dialogs initially on top of the owner window to make them easy to find. 


- If necessary, adjust the initial location so that the entire window is visible within the target monitor. If a resizable window is 
larger than the target monitor, reduce it to fit. 


Window order (Z order) 


- Always place owned windows on top of their owner window. Never place owned windows under their owner windows, because 
most likely users won't see them. 


- Respect users’ Z order selection. When users select a window, bring only the windows associated with that instance of the 


program (the window plus any owner or owned windows) to top of the Z order. Don't change the order of any other windows, 
such as independent instances of same program. 


Window activation 


- Respect users' window state selection. If an existing window needs attention, flash the taskbar button three times to draw 
attention and leave it highlighted, but don't do anything else. Don't restore or activate the window. Don't use any sound effects. 
Instead, let users activate the window when they are ready. 

o Exception: If the window doesn't appear on the taskbar, bring it to the top of all the other windows and flash its title bar 
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instead. 


- Restoring a primary window should also restore all its secondary windows, even if those secondary windows have their own 
taskbar button. When restoring, place secondary windows on top of the primary window. 


Input focus 


- Windows displayed by user-initiated actions should take input focus, but only if the window is rendered immediately (within 5 
seconds). Once the window is rendered, it can take input focus once. 
o If a window renders slowly (more than 5 seconds), users are likely to perform another task while they wait. Taking focus 
at this point would be an annoyance, especially if done more than once. 


- Windows that aren't immediately displayed or displayed by a system-initiated action shouldn't take input focus. Instead, 
display on top without focus, and let users activate them when they are ready. 
o Exception: Credential M anager. 


Persistence 


- When a window is redisplayed, consider displaying it in the same state as last accessed. When closing, save the monitor used, 
window size, location, and state (maximized vs. restore). When redisplaying, restore the saved window size, location, and state 
using the appropriate monitor. Also, consider making these attributes persist across program instances on a per-user basis. 
Exceptions: 


o Don't save or make these attributes persist for windows when their usage is such that users are far more likely to want to 
start completely over. 


o For programs likely to be used on Windows Tablet and Touch Technology computers, save two windows states for 
landscape and portrait modes. For more information, see Designing for Varying Display Sizes. 


- Ifthe current monitor configuration prevents displaying a window using its last state: 
o Try to display the window using its last monitor. 


o If the window is larger than the monitor, resize the window as necessary. 
o Move the location toward the upper-left corner to fit within the monitor as necessary. 


o If the above steps don't solve the problem, revert to the default window placement guidelines. Consider restoring the 
previous size, if possible. 


© 2010, Microsoft Corporation. All rights reserved. Page 480 of 882 


Window Frames 


Most programs should use standard window frames. Immersive applications can have a full screen mode that 
hides the window frame. Consider using glass strategically for a simpler, lighter, more cohesive look. 


Design concepts 

Guidelines 
Window frames 
Full screen mode 
Glass 


With a window frame, users can manipulate a window and view the title and icon to identify its contents. 


-” 
Text Document - Notepac 


File Edit Format View Help 


A typical window frame. 


Note: Guidelines related to window management and branding are presented in separate articles. 


Design concepts 
Glass window frames 


The glass window frames are a striking new aspect of the Microsoft ®Windows®aesthetic, aiming to be both 
attractive and lightweight. These translucent frames give windows an open, less intrusive appearance, helping 
users focus on content and functionality rather than the interface surrounding it. 
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Glass window frames. 


You can use glass strategically in small regions within a window that touch the window frame. Such regions 
appear to be part of the window frame, even though technically they are part of the window's client area. 


In this example, glass is used in the client area to make it look like part of the frame. 


Hidden frames 


Sometimes the best window frame is no frame at all. This is often the case for the primary window of immersive 
full screen applications that aren't used in conjunction with other programs, such as media players, games, and 
kiosk applications. 


© 2010, Microsoft Corporation. All rights reserved. 


Page 482 of 882 


Content viewers often benefit from having the option to show content full screen. Examples include Windows® 
Internet Explorer® Windows Live Photo Gallery, Windows Movie Maker HD, Microsoft PowerPoint @ and 
Microsoft Word. 


In this example, Windows M edia Player can display its content full screen. 
Custom frames 


Most Windows applications should use the standard window frames. However, for immersive, full screen, stand- 
alone applications like games and kiosk applications, it may be appropriate to use custom frames for any 
windows that aren't shown full screen. The motivation to use custom frames should be to give the overall 
experience a unique feel, not just for branding. 


Custom frames are appropriate for immersive, full screen, stand-alone applications such as games. 
Guidelines 
Window frames 


- Use standard window frames. 
o Exception: To give immersive full screen, stand-alone applications a unique feel: 
= Consider hiding the window frame of the primary window. 


= Consider using custom frames for secondary windows. 


= |facustom frame is appropriate, choose a design that is lightweight and doesn't draw too much attention to itself. 
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In this example, the custom frame draws too much attention to itself. 
- Don't add controls to a window frame. Put the controls within the window instead. 


Incorrect: 


& ®@ - Conversation 


File Edit Actions Tools Help 


Correct: 


& ® - Conversation 


File Edit Actions Tools Help 


In the correct example, the control is within the client area instead of the window frame. 
Full screen mode 


- For programs that have an optional full screen mode, to enable full screen mode: 


o Have amodal full screen command in the menu bar or toolbar. When the user clicks the command, show the command in its selected 


state. 
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aaa 53 &) Get More Add-ons > 
|S@ MSN.com || fe» + 


Diagnose Connection Problems 


Reopen Last Browsing Session 


Pop-up Blocker 
Manage Add-ons 


® Hotmail Airfares & | 2 
Ridres Work Offline 


Careers § Compatibility Viev 
® My MSN City Guid Byte) Setti 
@ Internet Explorer 8 Dating & Compatibility View ai 
Full Screen 
Sign in Toolbars Ly 
Make MSN your homepage Explorer Bars 


® Messenger 


¢ Want more entertainment 
content? Try our beta homepage vos ae 


Customize your Page 


Suggested Sites 


Create Mobile Favorite... 
Send to OneNote 


Internet Options 


This example shows the full screen command along with its standard shortcut key. 


o Use F11 for the full screen shortcut key. 
o If there is a toolbar and full screen mode is commonly used, also have a graphic toolbar button with a Full screen tooltip. 


Examples of full screen toolbar buttons. 


- To revert back from full screen mode: 
o Have amodal full screen command in the menu bar or toolbar. When the user clicks the command, show the command in its cleared 
state. 


o Use F11 for the full screen shortcut key. If not already assigned, Esc can also be used for this purpose. 
Glass 


Standard window frames use glass automatically in Windows, but you can also use glass in regions that touch the 
window frame. 


- Consider using glass strategically in small regions touching the window frame without text. Doing so can give a program a 
simpler, lighter, more cohesive look by making the region appear to be part of the frame. 
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In this example, glass focuses the user's attention on the content instead of the controls. 
- Don't use glass in situations where a plain window background would be more attractive or easier to use. 


Correct: 


In this example, glass is used to give the Alt+Tab window a lightweight appearance. Glass works for this window 
because it consists of graphics and a single, strong text label. 


Incorrect: 
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In this incorrect example, the use of glass is distracting. A plain window background would be a better choice. 
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Dialog Boxes 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
General 
Modal dialog boxes 
Modeless dialog boxes 
Multiple dialog boxes 
Multi-page dialog boxes 
Presentation 
Title bars 
Interaction 
Progress dialogs 
Icons and graphics 
Commit buttons 
Command links 
Don't show this <item>again 
Ask me later 
More/ Fewer 
Footnotes 
Disabling or removing controls vs. giving error messages 
Required input 
Error handling 
Help 
Default values 
Recommended sizing and spacing 
Text 
Documentation 


A dialog box is a secondary window that allows users to perform a command, asks users a question, or provides 
users with information or progress feedback. 


Title Internet Explorer - Security Warning 


Main instruction Do you want to run this software? 
Ca Name: Windows Live Messenger Content area 
Publisher: Microsoft Corporation 
Progressive v ) More options Commit button 
disclosure 


(fl) While files from the Internet can be useful, this file type can potentially harm Footnote area 
‘7 your computer. Only run software from publishers you trust. What's the risk? 


A typical dialog box. 


Dialog boxes consist of a title bar (to identify the command, feature, or program where a dialog box came from), 
an optional main instruction (to explain the user's objective with the dialog box), various controls in the content 
area (to present options), and commit buttons (to indicate how the user wants to commit to the task). 


Dialog boxes have two fundamental types: 


- Modal dialog boxes require users to complete and close before continuing with the owner window. These dialog boxes are best 
used for critical or infrequent, one-off tasks that require completion before continuing. 


- Modeless dialog boxes allow users to switch between the dialog box and the owner window as desired. These dialog boxes are 
best used for frequent, repetitive, on-going tasks. 


A task dialog is a dialog box implemented using the task dialog application programming interface (API). They 
consist of the following parts, which can be assembled in a variety of combinations: 


- Atitle bar to identify the application or system feature where the dialog box came from. 
© 2010, Microsoft Corporation. All rights reserved. Page 488 of 882 


- Amain instruction, with an optional icon, to identify the user's objective with the dialog. 
- A content area for descriptive information and controls. 
- Acommand area for commit buttons, including a Cancel button, and optional More options and Don't show this <tem>again controls. 


- A footnote area for optional additional explanations and help, typically targeted at less experienced users. 


Customer Experience Improvement Program 


Do you want to join the Windows Customer Experience 
Improvement Program? 


The program collects information about computer hardware and how you use Windows, 
without interrupting you. This helps Microsoft identify which Windows features to 
improve. No information collected is used to identify or contact you. 


Read more about the program online 


@ Join the Windows Customer Experience Improvement Program 


© I don't want to join the program at this time 


A typical task dialog. 


Task dialogs are recommended whenever appropriate because they are easy to create and they achieve a 
consistent look. Task dialogs do require Windows Vista@®or later, so they aren't suitable for earlier versions of 
Microsoft ®Windows@® 


A task pane is like a dialog box, except that it is presented within a window pane instead of a separate window. 
As aresult, task panes have a more direct, contextual feel than dialog boxes. Even though technically they are not 
the same, task panes are so similar to dialog boxes that their guidelines are presented in this article. 


Search for: 


All Reference Books |~| 
Qc |~] |Ol~ 


Type text to look up ina 
variety of research and 
reference Services. 


You can also press ALT and 
click 2 word to start a 
search. 


(& Research options... 


A typical task pane. 


Property windows are a specialized type of dialog box used to view and change properties for an object, 
collection of objects, or a program. Additionally, property windows typically support several tasks, whereas dialog 
boxes typically support a single task or step in a task. Because their usage is specialized, property windows are 
covered in a different set of guidelines. 


Dialog boxes can have tabs, and if so they are called tabbed dialog boxes. Property windows are determined by 


their presentation of properties, not by the use of tabs. 
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Note: Guidelines related to layout, window management, common dialog boxes, property windows, wizards, 
confirmations, error messages, and warning messages are presented in separate articles. 


Is this the right user interface? 
To decide, consider these questions: 


- Is the purpose to provide users with information, ask users a question, or allow users to select options to perform a command 
or task? If not, use another user interface (UI). 


- Isthe purpose to view and change properties for an object, collection of objects, or a program? If so, use a property window 
or toolbar instead. 


- Isthe purpose to present a collection of commands or tools? If so, use a toolbar or palette window. 


- Is the purpose to verify that the user wants to proceed with an action? Is there a clear reason not to proceed and a reasonable 
chance that sometimes users won't? If so, use a confirmation. 


- Is the purpose to give an error or warning message? If so, use an error message or warning message. 


- Isthe purpose to: 
o Open files 


o Save files 
o Open folders 
o Find or replace text 
o Print a document 
o Select attributes of a printed page 
o Select a font 
o Choose a color 
o Browse for a file, folder, computer, or printer 
o Search for users, computers, or groups in Microsoft Active Directory® 
o Prompt for a user name and password? 
If so, use the appropriate common dialog instead. M any of these common dialogs are extensible. 
- Isthe purpose to perform a multi-step task that requires more than a single window? If so, use a task flow or wizard instead. 


- Isthe purpose to inform users of a system or program event that isn't related to the current user activity, that doesn't 
require immediate user action, and users can freely ignore? If so, use a notification instead. 


- Isthe purpose to show program status? If so, use a status bar instead. 


- Would it be preferable to use in-place UI? Dialog boxes can break the user's flow by demanding attention. Sometimes that break 
in flow is justified, such as when the user must perform an action that is outside the current context. In other cases, a better approach 
is to present the UI in context, either directly with in-place UI (such as a task pane), or on demand using progressive disclosure. 


- Is the purpose to display a non-critical user input problem or special condition? If so, use a balloon instead. 


- For task flows, would it be preferable to use another page? Generally you want a task to flow from page to page within a 
single window. Use dialog boxes to confirm in-place commands, to get input for in-place commands, and to perform secondary, 
stand-alone tasks that are best done independently and outside the main task flow. 


- For selecting options, are users likely to change the options? If not, consider alternatives, such as: 
o Using the default options without asking, but allowing users to make changes later. 


o Providing a version with options (for example, Print... in a menu) as well as a version without options (for example, Print in the 
toolbar). Generally, tooloar commands should be immediate and avoid displaying dialog boxes. 


- For selecting options, is there a simpler, more direct way to present the options? If so, consider alternatives, such as: 
o Using a split button to select variations of a command. 


o Using a submenu for commands, check boxes, radio buttons and simple lists. 
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il Nee . None 
ve Show page title {Sj} Narrow ruled 
Templates... 3) College ruled 
Se color > =| Standard ruled 
Notebook color... Wide ruled 
| Small grid 
3] ~Medium grid 
4 Large grid 
SH Very large grid 
Navigation pane » | 
To-do bar ee 1M) Normal | 
Reading pane » Minimized 
Reminders window Off Alt+F2 
Toolbars > | [¥] Date navigator 
ve Status bar | ve Appointments 
Refrest FS |[M) Task list 


Options... 


In these examples, submenus are used instead of dialog boxes for simple selections. 
Design concepts 


When properly used, dialog boxes are a great way to give power and flexibility to your program. When misused, 
dialog boxes are an easy way to annoy users, interrupt their flow, and make the program feel indirect and tedious 
to use. Modal dialog boxes demand users' attention. Dialog boxes are often easier to implement than 
alternative Uls, so they tend to be overused. 


A dialog box is most effective when its design characteristics match its usage. A dialog box's design is largely 
determined by its purpose (to offer options, ask questions, provide information or feedback), type (modal or 
modeless), and user interaction (required, optional response, or acknowledgement), whereas its usage is largely 
determined by its context (user or program initiated), probability of user action, and frequency of display. 


To design effective dialog boxes, use the following elements effectively: 


- Dialog box text 
- Main instructions 


- Don't show this <item> again option 


If you do only one thing... 
Make sure that your dialog box design (determined by its purpose, type, and user interaction) matches its usage 
(determined by its context, probability of user action, and frequency of display). 


For more information and examples, see Dialog Box Design Concepts. 


Usage patterns 
Dialog boxes have several usage patterns: 


- Question dialogs (using buttons) ask users a single question or to confirm a command, and use simple responses in 
horizontally arranged command buttons. 


- Question dialogs (using command links) ask users a single question or to select a task to perform, and use detailed responses 
in vertically arranged command links. 
- Choice dialogs present users with a set of choices, usually to specify a command more completely. Unlike question dialogs, 
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choice dialogs can ask multiple questions. 


- Progress dialogs present users with progress feedback during a lengthy operation (longer than five seconds), along with a command 
to cancel or stop the operation. 


- Informational dialogs display information requested by the user. 
For more information and examples, see Dialog Boxes Usage Patterns. 


Guidelines 
General 


- Don't use scrollable dialog boxes. Don't use dialog boxes that require the use of a scroll bar to be viewed completely during 
normal usage. Redesign the dialog box instead. Consider using progressive disclosure or tabs. 


- Don't have a menu bar or status bar. Instead, provide access to commands and status directly on the dialog box itself, or by 
using context menus on the relevant controls. 
o Exception: M enu bars are acceptable when a dialog box is used to implement a primary window (such as a utility). 


Incorrect: 


Find Certificates 
File Edit View Help 


Find in: | All certificate stores — 


Contains: Find now 


Look in field: [Issued by Stop 


New search 


Leam more about finding certificates 


In this example, Find Certificates is a modeless dialog box with a menu bar. 


- Ifa dialog box requires immediate attention and the program isn't active, flash its taskbar button three times to draw attention, 
and leave it highlighted. Don't do anything else: don't restore or activate the window and don't play any sound effects. Instead, 
respect the user's window state selection and let the user activate the window when ready. 


For more guidelines and examples, see Taskbar. 


Modal dialog boxes 


. Use for critical or infrequent, one-off tasks that require completion before continuing. 
- Use a delayed commit model so that changes don't take effect until explicitly committed. 


- Implement using a task dialog whenever appropriate to achieve a consistent look. Task dialogs do require Windows Vista or later, 
so they aren't suitable for earlier versions of Windows. 


Modeless dialog boxes 


- Use for frequent, repetitive, on-going tasks. 
- Use an immediate commit model so that changes take effect immediately. 


- For modeless dialogs, use an explicit Close command button in the dialog to close the window. For both, use a Close button on the 
title bar to close the window. 


- Consider making modeless dialog boxes dockable. Dockable modeless dialogs allow for more flexible placement. 


UZ:2:=:)9 9 a x +i) 3 
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Some modeless dialog boxes used in Microsoft Office are dockable. 
Multiple dialog boxes 


- Don't display more than one owned choice dialog at a time from an owner choice dialog. Displaying more than one makes 
the meaning of the commit buttons difficult for users to understand. You may display other types of dialog boxes (such question 
dialogs) as needed. 


- Fora sequence of related dialogs, consider using a multi-page dialog if possible. Use individual dialogs if they aren't clearly related. 
Multi-page dialog boxes 


- Use a multi-page dialog box instead of individual dialog boxes when you have the following sequence of related pages: 
1. Asingle input page (optional) 


2. A progress page 
3. Asingle results page 


The input page is optional because the task may have been initiated somewhere else. Doing so gives the resulting experience a 
stable, simple, lightweight feel. 


=) Windows Network Diagnostics 


Identifying the problem... 


=") Windows Network Diagnostics 


Windows did not find any problems with this computer's network 
connection 


Do you want to report the problem to Microsoft? Additional details about what went wrong 
can help create a solution. The report will be sent the next time you go online. 
Send information 


In this example, Windows Network Diagnostics consists of progress and results pages. 


- Don't use a multi-page dialog if the input page is a standard dialog. In this case the consistency of using a standard dialog is 
more important. 


- Don't use Next or Back buttons and don't have more than three pages. M ulti-page dialog boxes are for single-step tasks with 
feedback. They aren't wizards, which are used for multi-step tasks. Wizards have a heawy, indirect feel compared to multi-page 
dialog boxes. 


- On the input page, use specific command buttons or command links to initiate the task. 
- Use a Cancel button on the input and progress pages, and a Close button on the results page. 


Developers: You can create multi-page task dialogs using the TDM_NAVIGATE_PAGE message. 


Presentation 


To make dialog boxes easy to find and access, clearly associate the dialog with its source, and work well with 
multiple monitors: 
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- Initially display dialogs "centered" on top of the owner window. For subsequent display, consider displaying it in its last 
location (relative to the owner window) if doing so is likely to be more convenient. 


Initially center dialogs on top of the owner window. 


- Ifa dialog is contextual, display it near the object from which it was launched. However, place it out of the way (preferably 
offset down and to the right) so that the object isn't covered by the dialog. 


An object's properties are displayed near to the object. 


For modeless dialogs, display initially on top of the owner window to make it easy to find. If the user activates the owner 
window, that may obscure the modeless dialog. 


If necessary, adjust the initial location so that the entire dialog is visible within the target monitor. If a resizable window is larger 
than the target monitor, reduce it to fit. 


When a dialog is redisplayed, consider displaying it in the same state as last accessed. On close, save the monitor used, window 
size, location, and state (maximized vs. restore). On redisplay, restore the saved dialog size, location, and state using the 
appropriate monitor. Also, consider making these attributes persist across program instances on a per-user basis. 


- For resizable windows, set a minimum window size if there is a size below which the content is no longer usable. Consider altering 
the presentation to make the content usable at smaller sizes. 


[5 Windows Media Player 


a weir o~ 


In this example, Windows M edia Player ®changes its format when the window becomes too small for the 
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standard format. 


- Don't use the Always on Top attribute. 
o Exception: Use only when a dialog box implements an essentially modal operation, but it needs to be suspended briefly to access 
the owner window. For example, when spell-checking a document, users may occasionally leave the spell check dialog box and 
access the document to correct errors. 


For more information and examples, see Window Management. 
Title bars 


Dialog boxes don't have title bar icons. Title bar icons are used as a visual distinction between primary windows and 
secondary windows. 
o Exception: If a dialog box is used to implement a primary window (such as a utility) and therefore appears on the taskbar, it does have 
a title bar icon. In this case, optimize the title for display on the taskbar by concisely placing the distinguishing information first. 


- Dialog boxes always have a Close button. M odeless dialogs can also have a Minimize button. Resizable dialogs can have a 
Maximize button. 


- Don't disable the Close button. Having a Close button helps users stay in control by allowing them to close windows they don't want. 
o Exception: For progress dialogs, you may disable the Close button if the task must run to completion to achieve a valid state or 
prevent data loss. 


- The Close button on the title bar should have the same effect as the Cancel or Close button within the dialog box. Never give it 
the same effect as OK. 


If the title bar caption and icon are already displayed in a prominent way near the top of the window, you can hide the title bar 
caption and icon to avoid redundancy. However, you still have to set a suitable title internally for use by Windows. 


Interaction 


When displayed, user initiated dialog boxes should always take input focus. Program initiated dialog boxes shouldn't take input 
focus because the user may be interacting with another window. Such interaction misdirected at the dialog box may have 
unintended consequences. 


Assign initial input focus to the control that users are most likely to interact with first, which is usually (but not always) the 
first interactive control. Avoid assigning initial input focus to a Help link. 


For keyboard navigation, tab order should flow in a logical order, generally from left to right, top to bottom. Usually tab order 
follows reading order, but consider making these exceptions: 
o Put the most commonly used controls earlier in tab order. 


o Put Help links at the bottom of a dialog box, after the commit buttons in tab order. 


When assigning order, assume that users display dialog boxes for their intended purpose; so, for example, users display choice 
dialogs to make choices, not to review and click Cancel. 


- Pressing the Esc key always closes an active dialog box. This is true for dialog boxes with Cancel or Close, and even if Cancel has 
been renamed to Close because the results can no longer be undone. 


Access keys 
- Whenever possible, assign unique access keys to all interactive controls or their labels. Read-only text boxes are interactive 
controls (because users can scroll them and copy text) so they benefit from access keys. Don't assign access keys to: 


o OK, Cancel, and Close buttons. Enter and Esc are used for their access keys. However, always assign an access key to a control 
that means OK or Cancel, but has a different label. 
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Delete File 


‘- = Are you sure you want to move this file to the Recycle Bin? 


UXGuide 

Type: Text Document 

Size: 14.8 KB 

Date modified: 4/26/2007 12:50 AM 


In this example, the positive commit button has an access key assigned. 


o Group labels. Normally, the individual controls within a group are assigned access keys, so the group label doesn't need one. However, 
if there is a shortage of access keys, assign an access key to the group label and not the individual controls. 


o Generic Help buttons, which are accessed with F1. 


o Link labels. There are often too many links to assign unique access keys, and the underscores often used to signify links hide the 
access key underscores. Access links with the Tab key instead. 


o Tab names. Tabs are cycled using Ctrl+Tab and Ctrl+Shift+Tab. 

o Browse buttons labeled "...". These Browse buttons can't be assigned access keys uniquely. 

o Unlabeled controls, such as spin controls, graphic command buttons, and unlabeled progressive disclosure controls. 
o Non-label static text or labels for controls that aren't interactive, such as progress bars. 


Whenever possible, assign access keys for commonly used commands according to the Standard Access Key Assignments. 


While consistent access key assignments aren't always possible, they are certainly preferred—especially for frequently used 
dialog boxes. 


Assign commit button access keys first to ensure that they have the standard key assignments. If there isn't a standard 
key assignment, use the first letter of the first word. For example, the access key for Yes and No commit buttons should always be 
"Y" and "N", regardless of the other controls in the dialog box. 


To make access keys easy to find, assign the access keys to a character that appears early in the label, ideally the first character, 
even if there is a keyword that appears later in the label. 


Prefer characters with wide widths, such as w, m, and capital letters. 
Prefer a distinctive consonant or a vowel, such as "x" in Exit. 


Avoid using characters that make the underline difficult to see, such as (from most problematic to least problematic): 
o Letters that are only one pixel wide, such asi and I. 


o Letters with descenders, such as g, j, p, g, and y. 
o Letters next to a letter with a descender. 


For more guidelines and examples, see Keyboard. 


Progress dialogs 


For long-running tasks, assume that users will do something else while the task is completing. Design the task to 
run unattended. 


Present users with progress feedback dialog box if an operation takes longer than five seconds to complete, along with a command 
to cancel or stop the operation. 
o Exception: For wizards and task flows, use a modal dialog for progress only if the task stays on the same page (as opposed to 
advancing to another page) and users can't do anything while waiting. Otherwise, use a progress page or in-place progress. 


If the operation is a long-running task (over 30 seconds) and can be performed in the background, use a modeless progress dialog 
so that users can continue to use your program while waiting. 


M odeless progress dialogs: 
o Have a Minimize button on the title bar. 


o Are displayed on the taskbar. 


- Implement modeless progress dialogs so that they continue to run even if the owner window is closed. 
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™) 2 Minutes and 30 Seconds Remaining 


i734 


Copying 2,228 items (7 


from Desktop (Desktop) to Local Disk (D:) (D:\) 
About 2 minutes and 30 seconds remaining 


\¥) More information 


In this example, the file copy continues even if the owner window is closed. 


- Provide a command button to halt the operation if it takes more than a few seconds to complete, or has the potential never 
to complete. Label the button Cancel if canceling returns the environment to its previous state (leaving no side effects); otherwise, 
label the button Stop to indicate that it leaves the partially completed operation intact. You can change the button label from Cancel 
to Stop in the middle of the operation, if at some point it isn't possible to return the environment to its previous state. 


=) Windows Network Diagnostics 


Identifying the problem... 


In this example, halting the problem diagnosis has no side effect. 


- Provide a command button to pause the operation if it takes more than several minutes to complete, and it impairs users’ ability 
to get work done. Doing so doesn't force the user to choose between completing the task and getting their work done. 


- Gather as much information as you can before starting the task. 


- If recoverable problems are detected, have users deal with all problems found at the end of the task. If that isn't practical, have 
users deal with problems as they happen. 


- Don't abandon tasks as the result of recoverable errors. 


File In Use 


.  Theaction can't be completed because the file is open in Microsoft Office 
\ Word 


Close the file and try again. 


UX guideline 
a Type: Microsoft Office Word 97 - 2003 Document 
wr Size: 169 KB 
—— Date modified: 6/6/2007 11:24 AM 
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In this example, Windows Explorer allows users to continue with the task after a recoverable error. 


- Indicate problems by turning the progress bar red. 


= 2 Minutes and 30 Seconds remaining 
Copying 3 items (6.86 MB) 


from Pictures (D:\Users) to Removable Disk (E:) (E:\) 
2 minutes and 30 seconds remaining. 


Item Not Found 


Could not find this item 


This is no longer located in D:\Users 
Verify the item's location and try again. 


( v ) More infe 


UX guideline 
| Type: Microsoft Office Word 97 - 2003 Document 

on Size: 6.85 MB 

— Date modified: 12/6/2006 6:15 PM 


(sie) Eocene) 


Do this for all current items (1 found) 


In this example, a removable disk was removed during a file copy. 


- If the results are clearly apparent to users, close the progress dialog automatically on successful completion. Otherwise, use 
feedback only to report problems: 
o To display simple feedback, display the feedback in the progress dialog, and change the Cancel button to Close. 


o To display detailed feedback, close the progress dialog box and display an informational dialog. 


Don't use a notification for completion feedback. Use either a progress dialog or an action success notification, but not both. 


Time remaining 


- Use the following time formats. Start with the first of the following formats where the largest time unit isn't zero, then change to 


the next format once the largest time unit becomes zero. 
For progress bars: 


If related information is shown in a colon format: 
Time remaining: h hours, m minutes 

Time remaining: m minutes, s seconds 

Time remaining: s seconds 


If screen space is at a premium: 
h hrs, m mins remaining 

m mins, s secs remaining 

s seconds remaining 


Otherwise: 

h hours, m minutes remaining 
m minutes, s seconds remaining 
s seconds remaining 
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For title bars: 


hh:mm remaining 
mm:ss remaining 
0:ss remaining 


This compact format shows the most important information first so that it isn't truncated on the taskbar. 
- Make estimates accurate, but don't give false precision. If largest unit is hours, give minutes (if meaningful) but not seconds. 


Incorrect: 
hh hours, mm minutes, ss seconds 


Keep the estimate up-to-date. Update time remaining estimates at least every 5 seconds. 


- Focus on the time remaining because that is the information users care about most. Give total elapsed time only when there 
are scenarios where elapsed time is helpful (such as when the task is likely to be repeated). If the time remaining estimate is 
associated with a progress bar, don't have percent complete text because that information is conveyed by the progress bar itself. 


- Be grammatically correct. Use singular units when the number is one. 


Incorrect: 
1 minutes, 1 seconds 


- Use sentence-style capitalization. 
For more information and examples, see Progress Bars. 
Icons and graphics 
Graphics 
- Don't use large graphics that serve no purpose beyond filling space with eye candy. Keep the appearance simple instead. 


Incorrect: 


Security Warning 


C:\Porogram Files\Microsoft\Fabrikam.DLL 


contains macros by 
Microsoft Corporation 


Macros may contain viruses. It is always safe to disable 
macros, but if the macros are legitimate, you might lose 
some functionality. 


The security level is set to High. Therefore, you cannot 
enable macros from sources that you do not trust. 


Always trust macros from this source. 


Disable Macros Enable Macros 


In this example, the large graphic serves no purpose. 
Title bar icons 


- Dialog boxes don't have title bar icons. 
o Exception: If a dialog box is used to implement a primary window (such as a utility) and therefore appears on the taskbar, it does have 
a title bar icon. 


Body icons 
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- Choose the body icon based on the design pattern: 


Pattern Body icon 


Question dialogs Program, feature, object, warning icon (if potential loss of data or system access), 
security warning, or none. 
Choice dialogs None. 


Progress dialogs None (but may have an animation). 
Informational dialogs |None. 


Incorrect: 


Microsoft Office Outlook 


Are you sure you want to dismiss all these 
reminders? 


Don't show this message again 


Lvs) [me 


In this example, a warning icon is incorrectly used for a question that doesn't involve potential loss of data or 
system access. 


- Consider using icons to help users visually recognize your program's features. This technique is most effective when the icons 
are easily recognizable and used in several locations within your program. 


Add a Favorite 
Add this webpage as a favorite. To access your 
favorites, visit the Favorites Center. 


Name: ‘ou are offline 


In this example, the yellow star icon represents Favorites. The icon is easily recognizable and is used consistently 
throughout Windows to represent Favorites. 


- Use icons to help users recognize the object in question. 
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File Download 


Do you want to open or save this file? 


Name: Microsoft.ppt 
Type: Microsoft Office PowerPoint 97-2003 Presentati... 
From: usable 


|] Always ask before opening this type of file 


While files from the Intemet can be useful, some files can potentially 
harm your computer. If you do not trust the source, do not open or 
save this file. What's the risk? 


In this example, the object's icon helps users recognize the type of file being opened or saved. 


- Consider using icons to help make features self-explanatory. 


ws oh ob 
mw Sb a 
ul 22 my 


In this example, these icons help users visualize the effect of their features. 


- Use an icon in About Box dialogs for application branding. 
About Windows Live Messenger 


gy Windows Live Messenger 


Windows Live Messenger 
Version 8.1 (Build 8.1.0178.00) 


Copyright (C) 1997-2006 Microsoft Corporation. All rights reserved. 
Contains security software licensed from RSA Data Security Inc. 
Portions of this software are based in part on the work of the 


Independent JPEG Group. 


In this example, a bitmap is used in the About Box to identify and brand the application. 


Footnote icons 


- If you have a footnote, consider using a footnote icon to summarize the footnote's subject. 
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Internet Explorer - Security Warning 


Do you want to run this software? 


[a Name: Windows Live Messenger 
Publisher: Microsoft Corporation 


) More options 


r) While files from the Internet can be useful, this file type can potentially harm 
‘7 your computer. Only run software from publishers you trust. What's the risk? 


In this example, the footnote icon indicates that the question has security implications. 


- Don't use a footnote icon that repeats the body icon. 


- Don't use the error or information standard icons. Error conditions must be conveyed through the body icon and footnotes are 
always for information, making the information icon redundant. However, you can use the standard warning icon and the 
yellow security shield to alert users of risky consequences. 


For more information and examples, see Icons. 
Commit buttons 
Notes: 


- These guidelines don't apply to question dialogs using command links, because that pattern uses command links instead of buttons. 


- [Do it] and [Don't do it] are affirmative and negative responses, respectively, to the main instruction. 
General 


- Choose the commit buttons based on the design pattern: 
Pattern Commit buttons 


Question dialogs (using buttons) |One of the following sets of concise commands: Yes/No, Yes/No/ Cancel, [Do 
it]/Cancel, [Do it]/[Don't do it], [Do it]/[Don't do it]/Cancel. 


Question dialogs (using links) Cancel. 


Choice dialogs o Modal dialogs: OK/Cancel or [Do it]/ Cancel 
o Modeless dialogs: Close button on dialog box and title bar 
o Task pane: Close button on title bar 


Progress dialogs Use Cancel if returns the environment to its previous state (leaving no side 
effect); otherwise, use Stop. 


Informational dialogs Close. 


- All commit buttons except Apply result in closing the dialog box window. 


- Don't confirm commit buttons. Doing so unnecessarily can be very annoying. Exceptions: 
o The action is potentially catastrophic. 


o The action is clearly inconsistent with other actions. 
o If incorrect, the action may result in a significant loss of data, time, or effort on behalf of the user. 
For more guidelines and examples, see Confirmations. 


- Don't disable commit buttons. Exceptions: 
o If users must elevate to make a change, disable the positive commit buttons until the user makes a change. Doing so prevents 
users from elevating just to close a window by forcing them to click Cancel. 


o For more exceptions, see Disabling or removing controls vs. giving error messages. 


- Right-align commit buttons in a single row across the bottom of the dialog box, but above the footnote area. Do this even if there is 
a single commit button (such as OK). 
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Incorrect: 


\\Microsoft\Widgets 


\\Microsoft\Widgets 


} The network path was not found. 


Lox) 


In this example, the OK button is incorrectly centered. 


- Present the commit buttons in the following order: 
1. OK/[Do it]/Yes 


2. [Don't do it]/No 
3. Cancel 
4. Apply (if present) 
5. Help (if present) 
- If you have many related commit buttons, consolidate them using split buttons. 
- Have a clear separation from commit buttons (which close the window) and all other command buttons (such as Advanced), 


Responding to main instructions 


- Use positive commit buttons that are specific responses to the main instruction, instead of generic labels such as OK or Yes/ No. 
Users should be able to understand the options by reading the button text alone. Exceptions: 
o Use Close for dialogs that don't have settings, such as informational dialogs. Never use Close for dialogs that have settings. 


o Use OK when the "specific" responses are still generic, such as Save, Select, or Choose. Use OK when changing a specific setting or 
a collection of settings. 


o For legacy dialog boxes without a main instruction, you can use generic labels such as OK. Often such dialog boxes aren't designed 
to perform a specific task, preventing more specific responses. 


o Certain tasks require more thought and careful reading for users to make informed decisions. This is usually the case 
with confirmations. In such cases, you can purposely use generic commit button labels to force users to read the main 
instructions and prevent hasty decisions. 


Correct: 


Microsoft SQL Server 


rm Do you want to uninstall the Setup Support Files? 


Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 
If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


In this example, using Yes/No commit buttons forces users to at least read the main instruction. 


o Alternatively, you can add the word "anyway" to the positive commit button label to indicate that the dialog box presents a 
reason not to proceed and that users should read the dialog carefully before proceeding. 


Correct: 
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Microsoft SQL Server 


A Do you want to uninstall the Setup Support Files? 


Microsoft SQL Server 2005 Tools Express Edition is dependent on these files. 
If you uninstall them, this product will be broken. You can prevent damage from 
happening by uninstalling the product first. 


In this example, "anyway" is added to the commit button label to indicate that users should proceed carefully. 


- Use Cancel or Close for negative commit buttons instead of specific responses to the main instruction. Quite often users realize 
that they don't want to perform a task once they see a dialog box. If Cancel or Close were relabeled to specific responses, users 
would have to carefully read all the commit buttons to determine how to cancel. Labeling Cancel and Close consistently makes 
them easy to find. Exceptions: 

o Don't use Yes/ Cancel. Always use Yes/No as a pair. 


o Use a specific response when Cancel is ambiguous. For more information, see Commit buttons for indirect dialog boxes. 
- Don't map generic labels to their specific meaning with text in the content area. Instead, use specific commit button labels, or 
a question dialog using links if the labels are lengthy. 


Incorrect: 


Microsoft Internet Explorer 


Areyou sure you want to navigate away from this page? 
== Youwilllose all changes made since your last save. 
Press OK to continue, or Cancel to stay on the current page. 


In this example, OK is mapped to Continue, Cancel is mapped to Remain on Page. 
Yes and No buttons 
- Prefer specific responses to Yes and No buttons. While there's nothing wrong with using Yes and No, specific responses can 


be understood more quickly, resulting in efficient decision making. However, confirmations usually have Yes and No buttons to 
make users give the confirmation some thought before responding. 


- Use Yes and No buttons only to respond to yes or no questions. The main instruction should be naturally expressed as a yes or 
no question. Never use OK and Cancel for yes or no questions. 


Incorrect: 


Microsoft Office PowerPoint 


Do you want to run this software? 


Correct: 
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Microsoft Office PowerPoint 


Better: 


Microsoft Office PowerPoint 


Do you want to run this software? 
(run) 


In these examples, Yes and No are good responses to yes and no questions, but specific responses are even better. 


- Consider phrasing the main instruction as a yes or no question if commit buttons with specific phrasing turn out to be long 
or awkward. Alternatively, you can use command links for longer responses (five words or more) to the main instruction. 


Incorrect: 


Outlook failed to start correctly last time. Starting Outlook in safe mode will help you correct or isolate a startup 
problem in order to successfully start the program. Some functionality may be disabled in this mode. 


Do you want to start Outlook in safe mode? 


Start normally 


Correct: 
Microsoft Office Outlook 


Outlook failed to start correctly last time. Starting Outlook in safe mode will help you correct or isolate a startup 
problem in order to successfully start the program. Some functionality may be disabled in this mode. 


Do you want to start Outlook in safe mode? 


Se Ee 


The specific phrasing in the incorrect example is too long, so the correct example uses Yes and No. 


- Don't use Yes and No buttons if the meaning of the No response is unclear. If so, use specific responses instead. 


OK buttons 


- In modal dialogs, clicking OK means apply the values, perform the task, and close the window. 


- Don't use OK buttons to respond to questions. 
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- Don't assign access keys to OK, because Enter is the access key for the default button. Doing so makes the other access keys easier 
to assign. 


- Label OK buttons correctly. The OK button should be labeled OK, not Ok or Okay. 
- Don't use OK buttons for errors or warnings. Problems are never OK. Use Close instead. 


Incorrect: 


Microsoft Office Outlook 


There was a problem reading one or more of your reminders. Some reminders may not appear. Network 
problems are preventing connection to the Microsoft Exchange Server computer. 


In this example, Close should be used instead of OK. 


- Don't use OK buttons in modeless dialog boxes. Rather, modeless dialogs should use task-specific commit buttons (for example, 
Find). However, some modeless dialog boxes require only a Close button. 


Cancel buttons 


- Clicking Cancel means abandon all changes, cancel the task, close the window, and return the environment to its previous 
state, leaving no side effect. For nested choice dialog boxes, clicking Cancel in the owner choice dialog means any changes made 
by owned choice dialogs are also abandoned. 


- Provide a Cancel button to let users explicitly abandon changes. Dialog boxes need a clear exit point. Don't depend on users finding 
the Close button on the title bar. 
o Exception: Don't provide a Cancel button for dialog boxes without settings. The OK and Close buttons have the same effect as Cancel 
in this case. 


Incorrect: 


MSN Messenger 


a) We could not sign you in to MSN Messenger because there is a problem with your .NET Passport. 
’ Click OK to learn more at the .NET Passport Web site. 


In this example, having only a Close button on the title bar makes it appear as though users don't have a choice. 
- Don't use Cancel buttons to respond to questions. 


Incorrect: 


Microsoft Internet Explorer 


This window is busy. 
Closing this window may cause some problems. 


Do you want to close it anyway? 


In this example, OK and Cancel are incorrectly used to respond to a Yes or No question. 
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- Don't assign access keys to Cancel, because Esc is the access key. Doing so makes the other access keys easier to assign. 
- Don't use Cancel buttons in modeless dialog boxes. Rather, use Close instead. 


- Don't disable the Cancel button. Users should always be able to cancel dialog boxes. 
o Exception: You may disable the Cancel button in a progress dialog if there is a period during which the operation can't be 
cancelled. However, a better solution is to design such operations to always be cancelable. 


Close buttons 


- Use Close buttons for modeless dialog boxes, as well as modal dialogs that cannot be cancelled. 


- Clicking Close means close the dialog box window, leaving any existing side effects. Don't use Done, because it isn't an 
imperative construction. For nested choice dialog boxes, clicking Close in the owner choice dialog means any changes made by 
owned choice dialogs are preserved. 


- Put an explicit Close button in the dialog box body. Dialog boxes need a clear exit point. Don't depend on users finding the Close 
button on the title bar. 


- Make sure the Close button on the title bar has the same effect as Cancel or Close. 
- Don't assign access keys to Close, because Esc is its the access key. Doing so makes the other access keys easier to assign. 


Apply buttons 


- Don't use Apply buttons in dialog boxes that aren't property sheets or control panels. The Apply button means apply the 
pending changes, but leave the window open. Doing so allows users to evaluate the changes before closing the window. However, 
only property sheet and control panels have this need. 


Incorrect: 


Select printer 
‘Add Printer 
da P-1200 
S&S) Fax 
#3 Microsoft XPS Document Writer 


EP tof 


Enter either a single page number or a single 
page range. For example, 5-12 


In this example, a choice dialog needlessly has an Apply button. 
Commit buttons for indirect dialog boxes 


Note: Indirect dialog boxes are displayed out of context, either as an indirect result of a task or the result of a 
problem with a system or background process. For indirect dialogs, the Cancel button is ambiguous because it 
could mean cancel the dialog or cancel the entire task. 


- If users need to both cancel the dialog box and the task, give commit buttons to do both. Label the button that cancels the dialog 
box with a negative response to the main instruction. Label the button that cancels the entire task with Cancel. Using Cancel allows 
the dialog box to be used in many contexts. 
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Correct: 


Do you want to save changes to C:\New 
document.txt? 


In this example, this dialog box is displayed by Windows Paint as the result of a New or Exit command when the 
graphic hasn't been saved. Don't Save closes the dialog without saving, whereas Cancel cancels the New or Exit 
command. 
Incorrect: 


Microsoft Office 


You are closing the Office Shortcut Bar. This Office Shortcut Bar will start again automatically when you start 
Windows. Do you want the Office Shortcut Bar to start automatically when you start Windows? 


Cove] (mw _ | 


In this example, there is no way to cancel the task (closing Office Shortcut Bar) that led to displaying this dialog 
box. This dialog box needs a Cancel button. 


- If users just need to cancel the dialog but not the task, use a button with a specific, negative response to the main instruction, 
and don't have a Cancel button. 


Internet Explorer - Security Warning 


Do you want to run this software? 


Ca Name: Windows Live Messenger 
Publisher: Microsoft Corporation 


(¥) More options 


(gil) While files from the Internet can be useful, this file type can potentially harm 
your computer. Only run software from publishers you trust. What's the risk? 


In this example, this dialog box is displayed indirectly as the result of navigating to a Web page that installs an 
ActiveX control. Using Cancel would be ambiguous here, so Don't run is used instead. 


For more information and examples, see Command Buttons. 


Command links 


- Present a set of lengthy commands using command links, instead of command buttons or a combination of radio buttons and an 
OK button. Doing so allows users to respond with a single click. However, this approach works only for a single question. 


- Present the most commonly used command links first. The resulting order should roughly follow the likelinood of use, but also have 
a logical flow. 
o Exception: Command links that result in doing everything should be placed first. 
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- Ifa command link requires further explanation, provide a supplemental explanation. Supplemental explanations describe why 
users might want to choose the command, or what happens if the command is chosen. 


- Don't use supplemental explanations that are wordy restatements of the command link. Use a supplemental explanation only 
when you can't make a command link self-explanatory. Providing a supplemental explanation for one command link doesn't mean 
that you have to provide them for all commands. 


Windows Diagnostics 


Ly Your wireless router is not working properly 


> Restart the wireless router 
Allusers on the network will temporarily lose their connection. 


> Show other ways to connect to the Internet 


Whatis a wireless router? 


In this example, the supplemental explanation describes the implications of one of the options. 


- Use phrases that start with a verb, without ending punctuation. 


- Ifacommand is strongly recommended, consider adding "(recommended)" to the label. Be sure to add to the link label, not 
the supplemental explanation. 


- Ifacommand is intended only for advanced users, consider adding "(advanced)" to the label. Be sure to add to the link label, not 
the supplemental explanation. 


Always provide an explicit Cancel button. Don't use a command link for this purpose. 


Incorrect: 
Minesweeper 


What do you want to do with your game in 
progress? 


> Exit and save my game 
Save your game in progress, then exit. This will 
overwrite any previously saved games. 


Exit and don’t save 
Exit without saving your game. This is counted 
as a loss in your statistics. 


Don't exit 
Return to your game progress. 


In this example, the dialog box uses a command link instead of a Cancel button. 
For more information and examples, see Command Links. 
Don't show this <item> again 


- Consider using a Don't show this <item> again option to allow users to suppress a recurring dialog box, only if there isn't a 
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better alternative. It is better always to show the dialog if users really need it, or simply eliminate it if they don't. 


- Use this specific phrasing—replace <item> with the specific item. For example, Don't show this reminder again. When referring to 
a dialog box in general, use Don't show this message again. 


Clearly indicate when user input will be used for future default values by adding the following sentence under the option: 
Your selections will be used by default in the future. 


- Don't select the option by default. If the dialog box really should be displayed only once, do so without asking. Don't use this 
option as an excuse to annoy users—make sure the default behavior isn't annoying. 


Incorrect: 


Information Bar 


Did you notice the Information Bar? 


The Information Bar alerts you to security-related conditions 
for example, if a potentially unsafe file or pop-up was just 
blocked). If a webpage does not display properly, look for the 
Information Bar at the top of the page and click it. 


|] Dont show this message again 


Tell me more about the Information Bar 


In this example, the message should just be displayed once. No need to ask. 


Make the setting persist on a per-user basis. 


- Ifusers select the option and click Cancel, this option does take effect. This setting is a meta-option, so it doesn't follow the 
standard Cancel behavior of leaving no side effect. Note that if users don't want to see the dialog in the future, most likely they want 
to cancel it as well. 


- If users may need to restore these dialog boxes, provide a Restore messages command in the program's Options dialog box. 
For more information, see Using the Don't show this <item> again option in Design concepts. 


Ask me later 


- Provide this option to dismiss a dialog box only when: 
o The dialog box is indirect, so users are likely to be focused on another task. 
o Users must respond but not immediately, so they can continue with their work. 
o The question requires sufficient thought or effort such that users might make better decisions if given more time. 
o The dialog box or option will be presented automatically later (so that users really are asked later). 


Incorrect: 
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Microsoft Phishing Filter 


4 Help make your browser more secure: 
} Set up Phishing Filter 


Phishing Filter is designed to warn you if the website you are visiting might be 
impersonating another website. What is Phishing Filter? 


@ Turn on automatic Phishing Filter (recommended) 
Some website addresses will be sent to Microsoft to be checked. Information 
received will not be used to personally identify you. 
© Turn off automatic Phishing Filter 
Website addresses will not be sent to Microsoft unless you choose to check 
them. 


© Ask me later 


Lx) 


Read the Internet Explorer Privacy Statement online 


In this example, the question is simple enough that adding an Ask me later option only complicates it. 


- Otherwise, expect users to respond now, but allow them to close the dialog box normally with either Cancel or Close. When 
used properly, this option should be rare. 


More/ Fewer 
- Use More/ Fewer progressive disclosure buttons to show or hide advanced or rarely used options, commands, or details that 


target users typically don't need. Doing so simplifies the dialog box for typical usage. Don't hide commonly used options, commands, 
or information because users might not find them. 


Internet Explorer - Security Warning 


Do you want to run this software? 


Ca Name: Windows Live Messenger 
Publisher: Microsoft Corporation 


(¥) More options [run | 


li While files from the Internet can be useful, this file type can potentially harm 
your computer. Only run software from publishers you trust. What's the risk? 


In this example, rarely used options are hidden by default. 


- Don't use More/ Fewer controls unless there really is more detail to show. Don't just restate the same information in a different format. 
- Don't use M ore/ Fewer controls to show Help. Use Help links or footnotes instead. 


- With task dialogs, avoid combining M ore/ Fewer controls with Don't show this <item> again. This combination has an 
awkward appearance. 


- For labeling guidelines, see Progressive Disclosure. 


Footnotes 
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- Use footnotes for information that's not essential to a dialog box's purpose, but that users may find helpful in making decisions. 
Most users should be able to skip footnotes and still make informed decisions in their response to the dialog box. 


>» 


We, A program needs your permission to continue 


If you started this program, continue. 


Windows Live Messenger 


Microsoft Corporation 


(¥) Details Cancel 


User Account Control helps stop unauthorized changes to your computer. 


In this example, the footnote information is supplemental, not essential. 


Disabling or removing controls vs. giving error messages 


« When a control doesn't apply in the current context, consider the following options: 

o Remove the control when there is no way for users to enable it, or users don't expect it to apply and its state doesn't 
change frequently. Doing so simplifies the dialog box, and users won't miss it. Having a control appear and disappear frequently 
is annoying. 

o Disable the control when users expect it to apply or its state changes frequently, and users can easily deduce why the control 
is disabled. An example of easy deduction is disabling a commit button when there is a single, empty text box that requires any 
input. You can use balloons to display non-critical user input problems with text boxes and editable drop-down lists. However, if 
the problem can't be explained with a balloon or involves multiple controls, the deduction would no longer be easy. 

o Otherwise, leave the control enabled, but give an error message when it is used incorrectly. Disabling in this case would make 


it difficult for users to understand why the control is disabled. Users would be forced to determine the problem 
through experimentation and deductive logic. It's better just to provide a helpful error message to explain the problem explicitly. 


- Tip: |f you aren't sure whether you should disable a control or give an error message, start by composing the error message that 
you might give. If the error message contains helpful information that target users aren't likely to quickly deduce, leave the 
control enabled and give the error. Otherwise, disable the control. 


- If you disable a control, also disable all associated controls, such as its label, supplemental explanations, or command 
buttons. However, don't disable its group box, group label, or group explanation if there are any. 
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Edit Management Group 


Management Group Configuration 


Specify information that allows this computer to connect to the management group, 


Agent Action Account 


Specify the default account that the agent will use when performing actions requested 
by the management server, 


©) Use the Local System account to perform agent actions 


@ Use the following domain or local account to perform agent actions: 


User name: CONTOSO\alyoung 


Password: seseskdotetetcsk 


In this example, the disabled text box labels are also disabled, but their group label and group explanation are not. 
Required input 


- To indicate that users must provide information in a control, consider the following options: 
o Don't indicate anything, but handle missing required input with error messages. This approach reduces clutter and works well if 
most input is optional or users aren't likely to skip controls, thus keeping the number of error messages low. 


o Indicate required input using an asterisk at the beginning of the label. Explain the asterisk using either: 
= A footnote at the bottom of the content area that says * Required input. 


= A tooltip on the asterisk that says Required input. 
This approach works well if there aren't many required controls, but poorly if most controls are required. 


Sales price: $0.00 
* Income account: 


* Item tax: taxable 


In this example, asterisks are used to indicate required input. 


o If all controls require input, state "All input required" at an appropriate place at the top of the content area. This approach 
reduces clutter for this specific case. 
o Indicate optional inputs with "(optional)" after the label. This approach works well if most input is required, but poorly otherwise. 


- For consistency, try to use the same method to indicate required input throughout your program. Specifically, indicate either 
required or optional input as needed, but avoid using both within the same program. 


Error handling 


- Prevent errors by using controls that are constrained to valid user input. You can also help reduce the number of errors by 
providing reasonable default values. 


- Validate user input as soon as possible, and show errors as closely to the point of input as possible. 
- Use modeless error handling (in-place errors or balloons) for user input problems. 
o Use balloons for non-critical, single-point user input problems detected while in a text box or immediately after a text box 
loses focus. Balloons don't require available screen space or the dynamic layout that is required to display in-place messages. 
Display only a single balloon at a time. Because the problem isn't critical, no error icon is necessary. Balloons go away when 
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clicked, when the problem is resolved, or after a timeout. 


Enter PIN 


op 


Incorrect character Windows 
Anumber is the only valid character here. 


In this example, a balloon indicates an input problem while still in the control. 


o Use in-place errors for delayed error detection, usually errors found by clicking a commit button. (Don't use in-place errors for 
settings that are immediately committed.) There can be multiple in-place errors at a time. Use normal text and a 16x16 pixel error 
icon, placing them directly next to the problem whenever possible. In-place errors don't go away unless the user commits and no 
other errors are found. 


Sign in 
(x) Please type your e-mail address in the 


format yourname@example.com. 


3 Windows Live ID: 


(example555@hotmail.com) 


@ Please type your password. 


Password: 
Forgot your password? 


In this example, an in-place error is used for an error found by clicking the commit button. 


- Use modal error handling (task dialogs or message boxes) for all other problems, including errors that involve multiple controls, or 
are non-contextual or non-input errors found by clicking a commit button. 

- When an input problem is found and reported, set input focus to the first control with the incorrect data. Scroll the control into 
view if necessary. 


For more information and examples, see Error Messages and Balloons. 


Help 


- When providing user assistance, consider the following options (listed in their order of preference): 
o Give interactive controls self-explanatory labels. Users are more likely to read the labels on interactive controls than any other text. 
o Provide in-context explanations using static text labels. 
o Provide a specific Help link to a relevant Help topic. 


- Locate Help links at the bottom of the content area of the dialog box. If the dialog box has a footnote and the Help link is related to 
it, place the Help link within the footnote. 
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Windows Diagnostics 


Ly Your wireless router is not working properly 


> Restart the wireless router 
Allusers on the network will temporarily lose their connection. 


% Show other ways to connect to the Internet 


Whatis a wireless router? 


In this example, the Help link applies to the entire dialog. 


o Exception: If a dialog box has several distinct groups of settings that have separate Help topics (perhaps within group boxes), locate 
the Help links at the bottom of the groups. 


- Don't use general or vague Help topic links or generic Help buttons. Users often ignore generic Help. 


For more information and examples, see Help. 


Default values 


- Include a default commit button on every dialog box. 


- For question dialogs: 
o Select the safest (to prevent loss of data or system access), most secure response to be the default. If safety and security 
aren't factors, select the most likely or convenient response. 
= Exception: Don't make a destructive response the default unless there is an easy, obvious way to undo the command. 


- For choice dialogs: 
o For the initial default values, select the safest (to prevent loss of data or system access) and most secure values for each control. 
If safety and security aren't factors, select the most likely or convenient options. 


o For the subsequent default values, reselect the previously selected options if those values are likely to be repeated, and doing so 
is safe and secure. Otherwise, select the initial default values. 
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= Microsoft XPS Document Writer 


Idle 
Microsoft XPS Document Writer 


Page range 

© All 

©) Current page 
© Pages: 


Type page numbers and/or page ranges 
separated by commas counting from the start of 
the document or the section. For example, type 
1, 3, 5-12 or pisi, pis2, pls3-p8s3 


Print what: Document ix| 


Print: All pages in range ix] 


In this example, users are most likely to choose the same printing settings as they did last time. However, the 
number of copies desired is likely to change, so this setting isn't reselected. 


Recommended sizing and spacing 


Text 


Support the minimum Windows Vista screen resolution of 800 x 600 pixels. Layouts may be optimized for resizable windows using 
a screen resolution of 1024 x 768 pixels. 


Use resizable windows whenever practical to avoid scroll bars and truncated data. Windows with dynamic content and lists 
benefit the most from resizable windows. 


Fixed-sized windows must be entirely visible and sized to fit within the work area. 
Resizable windows may be optimized for higher resolutions, but sized down as needed at display time to the actual screen resolution. 


Choose a default window size appropriate for its contents. Don't be afraid to use larger initial window sizes if you can use the 
space effectively. 


General 


Remove redundant text. Look for redundant text in titles, main instructions, supplemental instructions, content areas, command 
links, and commit buttons. Generally, leave full text in instructions and interactive controls, and remove any redundancy from the 
other places. 


Use positive phrasing. Positive phrasing is easier for users to understand. 


Correct: 

Do you want to enable file and printer sharing? 
Incorrect: 

Do you want to disable file and printer sharing? 


However, phrasing must match the associated command, even if the command is negatively phrased; so, for example, use disable 
to confirm a Disable command. 


If necessary, use the word "window" to refer to the dialog box itself. 
Use the second person ("you/ your") to tell users what to do in the main instruction and content area. Often the second person 
is implied. 


Examples: 
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Choose the pictures you want to print 
Choose an account 


- Use the first person ("I/me/ my") to let users tell the program what to do in controls in the content area that respond to the 
main instruction. 


Example: Print the photos on my camera. 
Dialog box titles 


- Use the title to identify the command, feature, or program where a dialog box came from. 
o If dialog is user initiated, identify it using the command or feature name. Exceptions: 
a Ifa dialog box is displayed by many different commands, consider using the program name instead. 


a If that title would be redundant with the main instruction, use the program name instead. 
o If it is program or system initiated (and therefore out of context), identify it using the program or feature name to give context. 
o Don't use the title to explain what to do in the dialog—that's the purpose of the main instruction. 


- Use the exact command name for command-based names, but don't include the ellipsis if there is one. You can include the 
command's menu title if necessary to compose a good title. Example: for an Object... command in an Insert menu, use the title 
Insert Object. 


- Ifa modeless dialog box appears on the taskbar, optimize the title for display on the taskbar by concisely placing the 
distinguishing information first. Examples: "66% Complete," and "3 Reminders." 


- Don't include the words "dialog" or "progress" in the title. This is implied, and leaving it off makes it easier for users to scan. 
- Use title-style capitalization, without ending punctuation. 


Main instructions 


- Use the main instruction to explain concisely what to do in the dialog. The instruction should be a specific statement, 
imperative direction, or question. Good instructions communicate the user's objective with the dialog rather than focusing purely on 
the mechanics of manipulating it. 


- Omit the main instruction when the only thing you can say is obvious. In such cases, the content of the dialog box is self- 
explanatory. For example, the File Open and File Save common dialogs don't need a main instruction because their context and 
design make their purpose obvious. 


- Omit control labels that restate the main instruction. In this case, the main instruction takes the access key. 


Acceptable: 
Enter your billing address 
Billing address: 


In this example, the text box label is just a restatement of the main instruction. 


Better: 
Enter your billing address 


In this example, the redundant label is removed, so the main instruction takes the access key. 


- Be concise—use only a single, complete sentence. Pare the main instruction down to the essential information. If you must 
explain anything more, use supplemental instruction. 


- Use specific verbs whenever possible. Specific verbs (examples: connect, save, install) are more meaningful to users than generic 
ones (examples: configure, manage, set). 


- Use sentence-style capitalization. 
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- Don't include final periods if the instruction is a statement. If the instruction is a question, include a final question mark. 


- For progress dialogs, use a gerund phrase briefly explaining the operation in progress, ending with an ellipsis. Example: Printing 
your pictures... 


- Tip: You can evaluate a main instruction by imagining what you would say to a friend. If responding with the main instruction would 
be unnatural, unhelpful, or awkward, rework the instruction. 


Supplemental instructions 


- When necessary, use an optional supplemental instruction to present additional information helpful to understanding or using 
the page. You can provide more detailed information and define terminology. 


- Ifthe appearance of the dialog box is program or system initiated (and therefore out of context), use the supplemental instruction 
to explain why the dialog has appeared. For such dialogs, the context is usually not obvious. 


- Don't repeat the main instruction with slightly different wording. Instead, omit the supplemental instruction if there is not more 
to add. 


- Use complete sentences, sentence-style capitalization, and ending punctuation. 
Command links 


- Choose concise link text that clearly communicates and differentiates what the command link does. It should be self-explanatory 
and correspond to the main instruction. Users shouldn't have to figure out what the link really means or how it differs from other links. 


- Always start command links with a verb. 
- Use sentence-style capitalization. 
- Don't use ending punctuation. 


- If necessary, provide any further explanation using complete sentences and ending punctuation. However, add such explanations 
only when needed—don't add explanations to all command links just because one command link needs one. 


For more information and examples, see Command Link guidelines. 


Commit buttons 


- Use specific commit button labels that make sense on their own and are a response to the main instruction. Ideally users 
shouldn't have to read anything else to understand the label. Users are far more likely to read command button labels than static text. 


- Start commit button labels with a verb. Exceptions are OK, Yes, and No. 
- Use sentence-style capitalization. 
- Don't use ending punctuation. 


- Assign a unique access key. 
o Exception: Don't assign access keys to OK and Cancel buttons because Enter and Esc are their access keys. Doing so makes the 
other access keys easier to assign. 


Documentation 
When referring to dialog boxes: 


- In programming and other technical documentation, refer to dialog boxes as dialog boxes. Everywhere else, refer to dialog boxes 
by their title. If the title bar is hidden, refer to the dialog using the main instruction. 


- If you must refer to a dialog box in general, use window in user documentation. You can refer to a simple question dialog 
or confirmation as a message. 


- Use the exact title or main instruction text, including its capitalization. 
- When possible, format the title using bold text. Otherwise, put the title in quotation marks only if required to prevent confusion. 


Example: In Windows Security, click More Options. 
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Dialog Box Design Concepts 


Dialog Boxes 
Dialog Box Usage Patterns 


When properly used, dialog boxes are a great way to give power and flexibility to your program. When misused, 
dialog boxes are an easy way to annoy users, interrupt their flow, and make the program feel indirect and tedious 
to use. Modal dialog boxes demand users' attention. Dialog boxes are often easier to implement than 
alternative user interfaces (UIs), so they tend to be overused. 


Designing effective dialog boxes 


A dialog box is most effective when its design characteristics match its usage. A dialog box's design is largely 
determined by its purpose (to offer options, ask questions, provide information or feedback), type (modal or 
modeless), and user interaction (required, optional response, or acknowledgement). Its usage is largely 
determined by the context (user or program initiated), probability of user action, and frequency of display. 


Dialog box characteristics 
Modal dialog boxes have these characteristics: 


- Are displayed in a window that is separate from the user's current activity. 

« Require interaction—users must close before continuing with the owner window. 

« Can break users' flow. 

. Use a delayed commit model; changes aren't made until explicitly committed. 

« Have command buttons that commit to task. 

- Best used for critical or infrequent, one-off tasks that require completion before continuing. 


M odeless dialog boxes have these characteristics: 


- Can be displayed in context using a task pane or with an independent window. 

- Don't require interaction—users can switch between the dialog box or pane and the calling window as desired. 
- Can use an immediate commit model; changes are made immediately. 

- Have command buttons that close the window. 

- Best used for frequent, repetitive, or on-going tasks. 


Dialog box interactions 
Dialog boxes also have different types of user interaction: 


- Response required. Users must respond to provide required input. For example, a Replace command requires displaying a dialog 
box so users can specify the Find and Replace strings. 


- Response optional. Users might respond to provide optional input, but the default values are usually acceptable. For example, 
while users might make changes in a Print dialog box, they usually accept the default options. 


- Acknowledgement only. Users’ only interaction is to acknowledge the dialog box by reading and closing it. 
Dialog box contexts 


Dialog boxes are displayed in different contexts: 


- User initiated. A dialog box is displayed as the direct or indirect result of a user interaction. 
. System or program initiated. A dialog box is displayed independently of any user interaction. 
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Creating effective dialog boxes 
Consider these effective examples: 


- Amodal dialog box is an excellent choice for user initiated, one-off tasks that require a response: 


Do you want to save changes to C:\New 
document.txt? 


[_seve_] [_Don'tsave_] {Cancel | 


- Amodal dialog box is an excellent choice for infrequent system or program initiated, one-off tasks that require a response: 


| Your wireless router is not working properly 


> Restart the wireless router 
Allusers on the network will temporarily lose their connection. 


> Show other ways to connect to the Internet 


Whatis a wireless router? 


- Amodeless dialog box is an excellent choice for user initiated, on-going tasks: 


- Amodal dialog box is a good choice for critical or infrequent, program initiated messages that are likely to change user behavior: 
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You should change your battery or switch to outlet power immediately 


to keep from losing your work. 


Lo) 


Now consider these ineffective examples: 


- Amodal dialog box is a poor choice for frequent tasks to provide options that users don't have to change. Instead, use the default 
options without asking, but allow users to make changes later. 


Incorrect: 


Paste Options 


@ Keep source formatting 
© Match destination formatting 
© Keep text only 

Set default paste... 


Keep source formatting 
© Match destination formatting 
© Keep text only 


Set default paste... 


In the correct example, Microsoft ®Word 2007 correctly displays a modeless UI instead of a modal dialog when 
users paste text. That way, users aren't required to respond. 


- Amodal dialog box is a poor choice for messages that are unlikely to change user behavior. Instead, consider using a notification 
or a status bar, or even doing nothing. 


Incorrect: 
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Microsoft Outlook 


(i) Allfolders are up to date. 


Using a modal dialog box for status is annoying. In the correct example, Microsoft Outlook®correctly uses the 
status bar for this purpose, instead. 


- Amodal dialog box is often a poor choice for displaying important options. Instead, display essential options either directly with in- 
place UI, or on demand using progressive disclosure. 


Incorrect: 


Find and Replace 


Search: 
[=] Match case [=] Match prefix 

[©] Find whole words only [] Match suffix 

[Use wildcards 

[F) Sounds like (English) [© Ignore punctuation characters 
[©] Find all word forms (English) [©] Ignore white-space characters 


Find 


Correct: 
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Find and Replace 


Reading Highlight + 


Match prefix 
Match suffix 


Ignore punctuation characters 
©] Ignore white-space characters 


In this example, the search options could be set in an owned dialog box, but Word correctly uses progressive 
disclosure instead. 


- Amodal dialog box is a poor choice for giving feedback of minor importance, because it requires acknowledgement. 


Incorrect: 


Microsoft Office Word 


A Word has finished searching the document. The search item was not found. 


In this example, Word uses a modal dialog to indicate that it has finished searching a document, which forces 
users to click the OK button to acknowledge. M odeless feedback would be a better choice. 


If you do only one thing... 
Make sure that your dialog box design (determined by its purpose, type, and user interaction) matches its usage 
(determined by its context, probability of user action, and frequency of display). 


Improving ineffective dialog boxes 


Often the best solution to a bad modal dialog box is either to eliminate the dialog or to redesign it in a way that 
isn't modal. Some people have concluded that this means all modal dialog boxes are bad and should be 
eliminated. This is not a correct conclusion (except for Web-based applications, which really should try to avoid 
pop-up blockers). For example, it is perfectly acceptable to interrupt users with a model dialog box for tasks that 
require interaction. M odal dialog boxes are the right choice in many circumstances. Trying to eliminate every 
modal dialog box can reduce the quality of your overall UI. 
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If you have a dialog box that isn't effective, consider these alternatives: 


- If the dialog box is modal but doesn't have to be, consider using a modeless dialog box, task pane, or other modeless UI. 


- If the dialog box is for acknowledgement only, consider adding commands to make it actionable. For example, if the dialog box is 
presenting a problem, consider also providing solutions to the problem. 


- Review Is this the right user interface? to determine if there is a better solution. 


. If the user experience isn't harmed by removing the dialog box, consider just removing it. 


Using the Don't show this <item> again option 


Sometimes optional modal dialog boxes turn out to be annoying, especially when displayed often. Such dialog 
boxes typically strive to inform users about a recurring situation or a feature that addresses such situations. A 
common solution to this problem is to provide a Don't show this <tem>again option that suppresses the dialog 
box in the future: 


Information Bar 


Did you notice the Information Bar? 


The Information Bar alerts you to secunty+telated conditions 
for example, if a potentially unsafe file or pop-up was just 
blocked). If a webpage does not display properly, look for the 
Information Bar at the top of the page and click it. 


[| Dont show this message again 


Leam about the Information Bar 


In this example, the dialog box attempts to educate users about a recurring situation. Selecting Don't show this 
<item>again prevents the dialog box from being displayed in the future. 


This solution has problems. It assumes that users: 
- Make rational decisions about which dialog boxes to suppress based on their future needs and not on their emotions ("Stop 
pestering me!"). 


- Can accurately recognize the reoccurring situations in the future. 
- Can remember and apply the information from the previous instance of the dialog box, no matter how long ago it was displayed. 


If users fail in any of these steps, they won't see the dialog box in their moment of need, and there is no obvious 
way to get the dialog box back once suppressed. 


If you think your dialog box needs a Don't show this <tem>again option, that is a clear sign that it is annoying 
and potentially unnecessary. Before adding this option, consider the following alternatives: 


« Change the design to eliminate the need for the message. 


- Make the hard design decision: do users really need to see this dialog box? Will bad things happen if users don't know this 
information? If so, always display it; if not, never display it. 


Incorrect: 
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Microsoft Office Outlook 


Areyou sure you want to dismiss all these 
A reminders? 


Don't show this message again 


Cys (we | 


In this example, users don't need this confirmation because dismissing Outlook reminders has no adverse 
consequences. This confirmation shouldn't be displayed at all. 


- Use less intrusive solutions, such as in-place UI, progressive disclosure, modeless UI (such as balloons or tooltips), or notifications. 


Do the right thing by default. Don't force users to configure their way out of a bad initial experience. Keep in 
mind that littering your program with unnecessary modal dialog boxes is more likely to foster outrage than user 
education. At a certain point, users tend to dismiss such dialog boxes without reading them. 


If you are convinced that users really need to see the information for a while and a dialog box is the best solution, 
only then should you use the Don't show this <tem>again option. If users may need to restore these dialog 
boxes, provide a Restore messages command in the program's Options dialog box. 


Tip: When running your own program, don't change any of the Don't show this <tem>again defaults. Doing so 
helps you evaluate your program's experience the same way your users will. 
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Dialog Box Usage Patterns 


Dialog Boxes 
Dialog Box Design Concepts 


Dialog boxes have several usage patterns: 


Question dialogs 
(using buttons) 
Ask users a 
single question, 
and provide 
simple responses 
in horizontally 
arranged 
command 
buttons. 


Question dialogs 
(using command 
links) 

Ask users a 
single question 
or to select a 
task to perform, 
and provide 
detailed 
responses in 
vertically 
arranged 
command links. 
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File Download 


Do you want to open or save this file? 


Name: Microsoft.ppt 
Type: Microsoft Office PowerPoint 97-2003 Presentati... 
From: Microsoft.com 


|] Always ask before opening this type of file 


2 


While files from the Intemet can be useful, some files can potentially 
harm your computer. If you do not trust the source, do not open or 
save this file. What's the risk? 


In this example, Windows@lInternet Explorer®asks if the user wants to open or save a file. 


Type: Modal. 

Main instruction: The question being asked (could be phrased as an instruction). 

Icon: Program, feature, object, warning icon (if potential loss of data or system access), security warning, or none. 
Commit buttons: One of the following sets of concise commands: Yes/No, Yes/No/Cancel, [Do it]/Cancel, [Do it]/ 
[Don't do it], [Do it]/[Don't do it]/Cancel, where [Do it] and [Don't do it] are specific responses to the main 
instruction. 

Other controls: There may be supplemental explanations to help users make informed decisions, a chevron 
control to show more information, and a Don't show this <item>again option if the question can be suppressed 
in the future. 

Annoyance factor: High, if default response can be safely assumed, there really isn't a choice, or the differences 
among the choices aren't clear. 


While confirmations are presented as questions, they are covered specifically in Confirmations. 
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Choice dialogs 
Presents users 
with a set of 


choices, usually 


to specify a 


command more 


completely. 


Unlike question 


dialogs, choice 


dialogs can ask 


multiple 
questions. 
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‘€) ” Connect to the Internet 


How do you want to connect? 


irel 
alll Wireless 


Connect using a wireless router or a wireless network. 


Broadband (PPPoE) 


Connect using DSL or cable that requires a user name and password. 


=p 


i Dial-up 
Connect using a dial-up modem or ISDN. 


Help me choose 


In this example, Windows asks the user to install a device. Using command links instead of command buttons 
allows for more complete responses. 


In contrast to the version with command buttons, these dialogs may have several responses or responses that 
require more text to describe. 


Type: Modal. 

Main instruction: The question being asked (could be phrased as an instruction). 

Icon: Program, feature, object, warning icon (if potential loss of data or system access), security warning, or none. 
Command links: Two or more complete, specific responses to the main instruction. 

Commit buttons: Cancel. 

Other controls: There may be supplemental explanations to help users make informed decisions, and a chevron 
to show more information. 

Annoyance factor: High, if default response can be safely assumed, there really isn't a choice, or the differences 
among the choices aren't clear. 


While confirmations are presented as questions, they are covered specifically in Confirmations. 
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Footnote and Endnote 


Bottom of page 


End of document 


In this example, Microsoft Word presents options to specify the Insert Break command in a modal dialog box. 


In this example, Word presents options to specify the Find and Replace command in a modeless dialog box. 


Fom y [ 
poy  ~ [| 
sujet oy Ld 
To Eas 


2, Add Criteria ¥ 


In this example, Microsoft Outlook ®presents options to specify the Find command in a task pane. By not using a 
separate window, the command feels more direct and contextual. 


Type: Modal, modeless, and task pane. 

Main instruction: An optional imperative instruction that tells users what to do. 
Icon: None. 

Commit buttons: One of the following: 


- Modal dialogs: OK/ Cancel or [Do it]/Cancel, where [Do it] is a specific response to the main instruction. 


- Modeless dialogs: Close button on dialog box and title bar. 
- Task pane: Close button on title bar. 


Other controls: There may be supplemental explanations to help users make choices, and a chevron to show 
infrequently used options. 

Annoyance factor: Normally low, because user initiated and needs a response, but could be high if users rarely 
change default values. 
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Progress dialogs 
Presents users 
with progress 
feedback during 
a lengthy 
operation 
(longer than five 
seconds), along 
with a command 
to cancel or stop 
the operation. 


Informational 
dialogs 

Display 
information 
requested by the 
user. 


If the operation is a long-running task (over 30 seconds) and can be performed in the background, use a modeless 


progress dialog so that users can continue to use your program while waiting. 


| 2 Minutes and 30 Seconds remaining 


Copying 2,228 items (712 MB) 


from Desktop (Desktop) to Local Disk (D:) (D:\) 
About 2 Minutes and 30 Seconds remaining 


(¥) More information 


In this example, a modeless progress dialog box is used provide feedback while users continue to use the program. 


Type: Modal and modeless. 

Main instruction: A gerund phrase briefly explaining the operation in progress, ending with an ellipsis. Example: 
Downloading... 

Icon: None (but may have an animation). 

Commit buttons: Use Cancel if returns the environment to its previous state (leaving no side effect); otherwise, 


use Stop. 
Annoyance factor: Low, if user needs to know when operation is complete, but high if unnecessarily modal or 
operation isn't significant. 


Word Count 


Characters (with spaces) 
Paragraphs 
Lines 


|W] Indude textboxes, footnotes 


1 
1 
38 
38 
1 
1 
and 


In this example, Word uses a modal dialog box to display word count information. 


Type: Modal. 

Main instruction: A sentence that describes the information. 

Icon: None. 

Commit buttons: Close 

Other controls: There may be a chevron to show more information. 
Annoyance factor: Low, if information is relevant and requested by the user. 
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Common Dialogs 


Design concepts 
Is this the right user interface? 
Guidelines 

General 

Open File 

Save File 

File types lists 

Open Folder 

Font 

Persistence 


The Microsoft ®Windows®common dialogs consist of the Open File, Save File, Open Folder, Find and Replace, 


Print, Page Setup, Font, and Color dialog boxes. 


Open File 


‘¥ Open 


COuU- ) « Pictures » Sample Pictures > ¥ | +4 | 


Organize ¥ New Folder 


* Favorites 
MB Desktop 
sk Downloads 
Pp MSW Intranet 


| Recent Places 


Libraries 

B Documents 
@ Music 

=! Pictures 
Videos 


- 


Pictures... Arrange by: Folder ¥ Includes: 4 library locations 


Rocks 


File name: > | All Picture Files ’ 


Open File is optimized for quickly finding items to use with a program. 


Save File 
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iw) Microsoft Office W ] Ga iirc Microsoft Office Word Document 
Templates 10.1 KB 


(ga My SharePoint Si ig é New Microsoft Office Word 


Document 


: Microsoft Office Word Document 
* Favorites 


HD Desktop + Thursday 
Microsoft Office Word Document 
s Downloads 110.0 KB 


2 MSWiIntranet 7 


Filename: Thursday 


Soe ye (Ne 


Authors: Jonathan Tags: Add a tag 


Save Thumbnail 


Save File closes the loop by saving a file with its metadata. 


Open Folder 
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Browse for Files or Folders 


Select the target of the shortcut below: 


MB Desktop 
> [Sg Libraries 
b R Jonathan 


4) Computer 


> &% Local Disk (C:) 

> =m Local Disk (D:) 

> &3 DVD RW Drive (E:) 
€ia Network 


Open Folder is specifically for choosing folders. 


Find and replace 


Find allows users to search for text strings, whereas the Replace version optionally allows users to replace 
matches with another string. 


Print 
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Print allows users to select what to print, the number of copies to print, and the collation sequence, along with the 
ability to choose and configure printers. 


Page setup 
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Page setup allows users to select the paper size and source, page orientation, and margins. 


Font 
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Requiar 
Italic 


[Shadow 
[-] Outine 

|] Emboss 
[-) Engrave 


This is a TrueType font. This font will be used on both printer and screen. 


Font displays the fonts and point sizes of the available installed fonts. 


Color 
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Edit Colors 


ic colors 
a 
a 
fe 
a 
Cc 


ttt eee 
EEEEEH 
EERE 
TEERER 
EERE 
|\EEEED 


Ii 
si 
| WLI 
| WLI 
Td 
| WLI 


Color allows users to select a color, either through a predefined set of colors or by choosing a "custom" color. 


Design concepts 


By using the common dialogs, you help give users a consistent experience across different programs. And by 
using the common dialogs well, you also help give users an efficient, enjoyable experience. 


You can significantly improve users' experience with these dialogs by choosing the most appropriate defaults for: 


- Input values (examples: default folders, default file names). 
- Selected options (examples: selected printer, printing options). 


| LI 


- Views (examples: showing pictures in thumbnail view, showing pictures without file names, sorting by date, column 


widths). 


- Presentation (examples: window size, location, and contents). 


You must determine both the initial defaults and subsequent defaults. Initial default values are determined by 
your program and based on the target user's expected usage, whereas subsequent defaults are based on the 
actual usage. Past usage is the best indicator of future usage. 


Are your program's defaults efficient? Monitor the number of steps users have to take to perform the most 
common tasks. If users have to repeat the same, potentially unnecessary steps every time they perform a task, 
your default values can be improved. 


If you do only one thing... 


Give users an efficient, enjoyable experience by selecting appropriate initial and subsequent defaults. 


Is this the right user interface? 
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Yes! Use the common dialogs for a consistent user experience. Don't create your own. It is especially difficult to 
create custom Uls that navigate the namespace correctly and securely. Note that you can customize the common 
dialogs if necessary. 


For Windows Vista® the Open File and Save File have a new extensible architecture to make it easier to expose 
additional functionality. This mechanism is flexible enough to meet the minimum requirements of major 
independent software vendors (ISVs), but not be broken by future releases of Windows. 


Guidelines 
General 


- When appropriate, provide more direct or modeless alternatives. Allow users to: 
o Open files by dropping them on your program. 


o Save files using their current name and location with a Save command. 
o Find the next occurrence of a string using the F3 key. 
o Print one copy of an entire document to the default printer with a Print command. 
o Change fonts and font attributes using a toolbar or palette window. 
o Change colors using a toolbar or palette window. 
- Use the following commands to display common dialogs (given along with their preferred access keys): 


[Commondialog = [Command 
[OpenFile == Open, 
[OpenFolder = |Openfolder...orChoosefolder. 
[Find and Replace = |Find...orReplace., 


- You can use more specific commands, as appropriate. Example: for exporting a file, use the command Export file 
instead of Save as. 


- Set the dialog box title to reflect the command that launched it. Example: If Save File is launched from an Export file 
command, rename the dialog box to Export File. 


Open File 


- For the initial default folder, use a specialized folder (Pictures, Music, Videos) as appropriate, otherwise use Documents. 
- For subsequent default folders, use the last folder opened by the user using the program. 


- When opening photo files, suppress file names by default. Photos are usually identified by their thumbnails and their 
names typically aren't meaningful. 


Save File 


- For the initial default folder (if a new file is being saved for the first time), use the specialized folder (Pictures, Music, 
Videos) as appropriate, otherwise use Documents. 


- For temporary files, use the current user's temporary folder. Choose plain, but unique file names. Example: Use 
File0001.tmp instead of ~DF1A92.tmp. 
o Developers: You can get the current user's temporary folder using the GetTempPath API function. 
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For the initial default file name, use a unique default name based on: 
1. The file's contents, if known. Example: The first words in a document. 


2. A pattern chosen by the user. Example: If the previous file was named "Hawaii 1.jpg", choose "Hawaii 2.jpg" as 
the next file. 


3. A generic pattern based on the file type. Example: "Photol.jpg". 
For subsequent defaults (if the file already exists), use the file's current folder and name. 


When saving a file, preserve its creation date. If your program saves files by creating a temporary file, deletes the 
original, and renames the temporary file to the original file name, be sure to copy the creation date from the original 
file. 


Use Save File if the user selects the Save command without specifying a file name. 


File types lists 


Note: File types lists are used by Open File and Save File to determine the types of files displayed and the default 
file extension. 


If the file types list is short (five or fewer), order the list by likelihood of usage. If the list is long (six or more), use an 
alphabetical order to make the types easy to find. 


For Save File, include all variations of the supported file extensions, even if uncommon, and put the most common 
extension first. The file handling logic looks at this list to determine if the user supplied a supported file extension. 
Example: If a JPEG file types list includes only .jpg and .jpeg, the file test.jpe might be saved as test.jpe.jpg. 


For Save File, the initial default file type is the most likely chosen by the target user. The subsequent default is the file's 
current type. 


For Open File, the initial default file type is the most likely chosen by the target user. The subsequent default should be 
the last file type used. 


For Open File, include an "All files" entry as the first item if users can open any file type, or may need to see all files in a 
folder at the same time. Consider providing other meta filters, such as "All pictures," "All music," and "All videos." Place 
these immediately after "All files." 


Use the format "File type name (*.ext1; * .ext2)." The file type name should be the registered file type name, which you 
can view in the Folder Options control panel item. Example: "HTML document (*.htm; *.html)." 
o Exception: For meta-filters, remove the file extension list to eliminate clutter. Examples: "All files," "All 
pictures," "All music," and "All videos." 


Use sentence-style capitalization for the file type names, and lowercase for the file type extensions. 


Open Folder 


Font 


For new programs, use the Open Files dialog in the "pick folders" mode. Doing so requires Windows Vista or later, so 
use the Open Folder dialog for programs that run in earlier versions of Windows. 
o Developers: You can use the Open Files dialog in the "pick folders" mode by using the FOS PICKFOLDERS flag. 


If necessary, you can filter the font list to show only the fonts available to your program. 


Persistence 


Consider making the following values persistent to use as subsequent defaults: 
o Input values (examples: default folders, default file names). 


o Selected options (examples: selected printer, printing options). 


o Views (examples: showing pictures in thumbnail view, showing pictures without file names, sorting by date, 
column widths). 
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o Presentation (examples: window size, location, and contents). 


Exception: Don't make these values persist for common dialogs when their usage is such that users are far more likely 
to want to start completely over. 


- When determining default values, consider what target users are most likely to want based on the important scenarios. 
Also, consider scenarios within a program instance, across multiple instances (both consecutive or concurrent), and 
across multiple documents. Don't make values persist in circumstances that aren't likely to be helpful. 

o Example: For a typical document-based application, it's helpful to use persistent Open File and Save File 
settings within a program instance and across consecutive instances, but keep concurrent instances 
independent. That way, users can work efficiently with several documents at a time. 


- Make the settings persist on a per-program, per-user basis. 
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Wizards 


Despite that wonderful, whimsical name, wizards are not really a special form of user interface, and they have 
only a particular range of utility. 


Is this the right user interface? 
Design concepts 
Guidelines 
General 
Window size 
Wizard length 
Branching 
Commit buttons 
Cancel buttons 
Close buttons 
Other controls 
Using pages (vs. dialog boxes or inline Ul) 
Wizard pages 
Navigation 
Help 
Text 
Documentation 


Wizards are used to perform multi-step tasks. 


What type of printer do you want to install? 


> Add a local printer 


Use this option only if you don't have a USB printer. (Windows automatically installs USB printers 
when you plug them in.) 


> Adda network, wireless or Bluetooth printer 


Make sure that your computer is connected to the network, or that your Bluetooth or wireless 
printer is turned on. 
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Searching for available printers... 


Printer Name 


me [Stop 


> The printer that I want isn't listed 


You've successfully added printer 2F-E-6040-BW on BJS 


Set as the default printer 


To check if your printer is working properly, or to see troubleshooting information for the printer, print a 
test page. 


Multiple steps of a wizard are presented as a sequence of pages. 
Wizards typically include the following types of pages: 


- Choice pages are used to gather information and allow users to make choices. 
« The Commit page is used to perform an action that cannot be undone by clicking Back or Cancel. 


- The Progress page is used to show the progress of a lengthy operation. 
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Modern wizard design places a premium on efficiency, making the Progress page optional for shorter operations, 
and often dispensing with the traditional Welcome page and Congratulations page at the beginning and end. 


All wizard pages have these components: 


- Atitle bar to identify the name of the wizard, with a Back button in the upper-left corner, and a Close button with optional 
M inimize/M aximize and Restore buttons. Note that the title bar also includes an icon to identify it on the taskbar. 


« Amain instruction to explain the user's objective with the page. 
- Acontent area with optional text and possibly other controls. 
« Acommand area with at least one commit button to commit to the task or proceed to the next step. 


Although a wizard has multiple steps, these steps must all add up to a single task, from the user's point of view. 
This is the fundamental wizard design principle of "one wizard, one task." 


Thus in this article, a task is the basic function of a wizard (for example, the task of a setup wizard is to install a 
program). Sub-tasks are aspects of the larger task (for example, a sub-task of a setup wizard may be to configure 
the program to be installed). Finally, each wizard page is considered a step in a given sub-task or task (for 
example, there may be two or three steps involved in configuring the program). 


Note: Guidelines related to setup, dialog boxes, and progress bars are presented in separate articles. 


Is this the right user interface? 


A wizard can be used for any task that requires multiple input steps. However, effective wizards have additional 
requirements: 


- Does the wizard perform a single, atomic task? Don't use interactions that aren't single tasks (a whole program should never be 
a wizard unless it performs a single task). Don't use wizards to combine independent tasks or largely unrelated steps. 


- Can the number of required questions be reduced? Are there acceptable defaults that either work well for most cases or can 
be adjusted as needed later? Consequently, can the number of pages be reduced? If so, try to simplify the task so that it can 
be presented on a single page (such as a dialog box), or eliminate the need for input completely (allowing for the task to be 
performed directly). 


- Must the required questions be provided sequentially? Are there several probable, but optional questions? If so, consider a dialog 
box or tabbed dialog box. 
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The M icrosoft®PowerPoint Print options dialog box contains many user input options, so you could present them 
in a wizard. However, there is no need to provide them sequentially, so a dialog box is a better choice. 


Wizards are a relatively heavy form of user interface; if there is a suitable, lighter-weight solution available, use it! 
Design concepts 
Overuse of wizards 


Historically, wizards differed from ordinary UI in that they were designed to help users perform especially 
complex tasks (with steps residing in disparate locations) and often had built-in intelligence to help users 
succeed. Today, all Ul should be designed to make tasks as simple as possible, so there is no need for a special Ul 
just for this purpose. 


Yet the belief persists that wizards are a special Ul—largely because they are referred to as "wizards" (much more 
creative than, say, "dialogs" and "property windows"). Instead, it's better to consider them to be multi-step tasks 
and not draw special attention to that fact. 


Before creating a wizard, consider whether users really must be interrupted from the main flow of the program. 
There may be a lighter, inline, contextual solution that will ultimately feel more helpful and efficient to users. For 
example, a badly designed feature in a program doesn't warrant a wizard to explain and simplify it; it warrants 
redesign of the feature itself. A wizard should not be used as a band-aid to fix a more basic problem with the 
program. 


Wizards do have appropriate functions 


Wizards are one of the keys to simplifying the user experience. They allow you to take a complex operation, such 
as configuration of a program, and break it into a series of simple steps. At each point in the process, you can 
provide an explanation of what is needed, and display controls that allow the user to make selections and enter 
text. 


Certain types of multi-step tasks lend themselves to the wizard form. For example, in Windows, several wizards 
involve connectivity functions (to the Internet or corporate network, or to peripheral devices such as printers and 
fax machines). 
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‘€) tis Connect to a Workplace 


How do you want to connect? 


> Use my Internet connection (VPN) 
Connect using a virtual private network (VPN) connection through the Internet. 


xs @ & 


> Dial directly 
Connect directly to a phone number without going through the Internet. 


ip 


What is a VPN connection? 


Connecting to a network is a typical task in Windows appropriate for a wizard. 


Here the function of the wizard is to mediate between something known and stable (the out-of-box operating 
system) and something unknown and variable (connectivity arrangements with a phone company or Internet 
service provider). The complexity of computing ecosystems is significant enough now that it is genuinely helpful 
to use wizards to reduce that complexity. 


Other types of tasks that work well as Windows wizards include high-end functionality (such as speech and 
handwriting recognition) and rich media experiences (such as configuring options for making and publishing 
movies). Wizards can also be deployed for more basic multi-step tasks, such as troubleshooting. In short, if 
different users are likely to want to experience your program in widely different ways, this can indicate the need 
for a wizard and its capacity for multiple user input points. 


For your program, it is worth a little design time up-front to determine what function your wizard is serving, and 
whether that function really does rise to the level of deploying a wizard. 


Wizard length 
Design questions naturally arise around the number and organization of pages and options. For example: 


« Isthere an optimal number of pages for a wizard? Or at least a desirable range? 
« Should the wizard be concise and streamlined, so users can complete it as quickly as possible? 


- Should there be more pages that require fewer choices? Or fewer pages with more complexity? Which design is considered 
more usable? 


- Can you engineer faster wizard experiences by applying UI conventions such as tabbed pages? 


Microsoft used to advise that wizards of three pages or fewer be designed as simple wizards, and those of four or 
more pages use an advanced wizard design (see the Windows User Experience guidelines from 1999). But 
current wizard design standards dispense with what had been one of the key differences between the simple and 
advanced forms (the use of the Welcome and Congratulations pages), so these categories now feel inadequate, 
and the number of pages determining the design choice seems arbitrary. 


Your wizard should be as long or short as the task requires; there is no fixed guideline for its length. A one-page 
wizard should really be presented as a dialog box, so two pages is probably the most condensed form possible for 
a wizard. 


Correct: 
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iB Create a system repair disc 


Select a CD/DVD drive and insert a blank disc into the drive 


A system repair disc can be used to boot your computer. It also contains 
Windows system recovery tools that can help you recover Windows from a 
serious error or restore your computer from a system image. 


Drive: 


This task has so few options that presenting it as a wizard would be wasteful. A dialog box is the appropriate form 
for this user interface. 


At the other end of the spectrum, if you have a wizard that includes multiple decision points and branches, and 
frequently results in users losing track of their navigation path, you have exceeded a practical limit and should 
reduce the length of the wizard. Alternatively, you may be able to break the wizard up into several distinct tasks. 


As you determine the most appropriate length for your wizard, pay particular attention to your target users. 
Programs for end users such as home consumers and office workers tend to use wizards to hide complexity; the 
wizards are as short as possible, with clean, simple page design, and pre-selected defaults for as many options as 
possible. By contrast, server wizards or programs intended for IT professionals tend to be longer and more 
complex. This group of target users has a much higher tolerance for making configuration decisions, and may in 
fact become suspicious if too much complexity is hidden. 


If a wizard by nature simplifies a complex task, it should do so relatively minimally for a technically sophisticated 
audience, and relatively aggressively for a novice user base. 


Correct: 


‘Se ®, Install or uninstall display lang 
Choose to install or uninstall display languages 


Display languages allow Windows to display text in your chosen language and where supported 
recognize speech and handwriting. 


> Install display languages 


> Uninstall display languages 


How do I get additional display languages? 


This wizard page is well-designed for end users because it reduces a potentially complex subject to a simple, 
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logical binary choice: either install or uninstall. 


Correct: 


TH SQL Server 2008 Setup 


Feature Selection 


Select the Developer features to install. For clustered installations, only Database Engine Services and Analysis Services 
can be clustered. 


Setup Support Rules Features: Description: 


Feature Selection Instance Features Server features are instance-aware and have 

Disk Space Requirements Database Engine Services their own registry hives. They support 

Error and Usage Reporting SQL Server Replication multiple instances on a computer. 
Full-Text Search 

Analysis Services 

Reporting Services 

Installation Progress Shared Features 

| Complete Business Intelligence Development Studio 

Client Tools Connectivity 

Integration Services 

Client Tools Backwards Compatibility 

Client Toots SOK 

SQL Server Books Online 

Management Tools - Basic 


| Installation Rules 
Ready to Install 


Management Tools - Complete 
SQL Client Connectivity SOK 
Microsoft Sync Framework 


Select All Unselect All 


Shared feature directory C:\Program Files\Microsoft SQL Server\ 


In the setup wizard for Microsoft SQL Server ®2008, page design is busier and the numerous choices require more 
thought, but the target audience is database administrators who expect tight control of feature selection. 


Finally, pay attention to how frequently the particular task might be performed. An infrequent task may deploy a 
longer wizard, whereas frequent tasks should definitely favor brevity. 


Branching 


For longer wizards, you may need to create branches of the task flow in which the sequence of pages may differ 
according to the user input provided "upstream." Branching is inherently dislocating for users, so you must design 
the user experience to convey stability. We recommend no more than two decision points that will cause 
branching in the entire wizard, and no more than one nested branch within a single branch. 


For guidelines about creating a stable user experience within a branching wizard, see Branching in the Guidelines 
section of this article. 


Providing a navigation guide 


Navigation guides can be useful when there are many steps in the task, and users may lose their place in the 
sequence, or simply want to know how much longer it will take to complete. 


Navigation guides often appear as a list of pages or sections of the wizard, looking a bit like a table of contents, in 
a column or pane on the left side of each page. Although the list persists throughout the wizard (the same list of 
pages appears on each page), there is some visual means of indicating where the user currently is in the 
sequence (for example, using bold to distinguish the active page or section). 


Navigation guides can be sequential or non-sequential. The sequential type presents the past pages along with 
the known future pages. You can present the future in terms of steps instead of pages if the steps are known and 
pages are dependent. You can then populate pages dynamically as they become known. Because the navigation 
sequence is fixed, the navigation guide isn't interactive. 


Non-sequential navigation guides are interactive, so users can revisit previously viewed pages directly. They can 
also skip ahead of the navigation sequence for pages that are designed to be optional. Optional pages must have 
defaults that are acceptable in most circumstances. With this type of guide: 


- Previously viewed pages can always be viewed directly. 
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- Future pages may not be viewed if they have prerequisites. 


- Pages that can be visited should be visibly distinguished from those that can't (such as by using links that are active or disabled), 


along with pages that are required or optional. 


Users can become confused about the meaning of the Back button in this scenario. Does clicking Back lead you to 
the previous page or section in the navigation guide, or the last page or section viewed? Because Windows 
wizards now place the Back button in the upper-left corner of wizard pages, rather than in the lower-right corner 
with the other commit buttons, users think of Back functionality as they do on the Web. So the best solution is to 
give your Back button the Web navigation meaning (clicking Back should lead to the last page or section viewed), 
and use the wizard navigational guide for sequential navigation. 


Page integrity 


Wizard design involves not only decisions pertaining to the entire task flow, like how to handle navigation and the 
branching experience, but also those pertaining to the individual pages that make up the wizard. The most 
important principle for designing good wizard pages is that of integrity: the contents of a page should belong 
together. 


Wizard pages are significantly more usable if each one hangs together conceptually, dealing with only one aspect 
of the overall task. The main instruction is the primary means of achieving this. Clearly identify the goal or 
purpose of the page to users. Supplemental instructions, and any controls on the page, all pertain directly to the 
main instruction. Although wizard pages should present users with options for which some thought is required, 
that effort doesn't feel like work because it is tightly focused by the integrity of the page itself. 


Unfortunately wizard designers often mistake users’ rapid clicking of the Next button as evidence of the usability, 
simplicity, and integrity of their pages. The ultimate wizard experience isn't Next, Next, Next, Next, Finish. While 
such an experience suggests that the defaults were well chosen, it also suggests that the wizard wasn't really 
necessary because all the choices are optional. 


In terms of visuals and text, pare down these elements to the bare essentials. Resist the urge to bundle up 
multiple sub-tasks on a single page (the "burrito wizard") or to resort to tabs for presenting complex input 
requirements. A single page should cover a single sub-task of the overall task of the wizard. 


Incorrect: 


1H SQL Server 2008 Setup 


Database Engine Coerinn ation : 


Specify Database Engine authentication secunty mode, administrators and data directories. 


Setup Support Rules Account Provisioning | Data Directories | FILESTREAM 

Installation Type 

Product Key Specify the authentication mode and administrators for the Database Engine 
License Terms Authentication Mode 
Setup Role 


Feature Selection 


® Windows authentication mode 


Mixed Mode (SQL Server authentication and Windows authentication) 
Installation Rules 


Instance Configuration Specify the password for the SQL Server system administrator (sa) account. 
Disk Space Requirements 

Server Configuration 

Database Engine Configuration 
Analysis Services Configuration Specify SQL Server administrators 
Reporting Services Configuration 


Enter password: 


Confirm password: 


SQL Server 
Error Reporting administrators have 
unrestricted access to 


Installation Configuration Rules 
the Database Engine. 


Ready to Install 
Installation Progress 
Complete 


Add Current User Add... 


With three tabs of fairly dense user input required, this wizard page is trying to accomplish too much. 


In most cases, maintain the size of each page throughout the wizard to foster a consistent look and feel. Although 
Windows wizards allow for resizable pages so that the size of a page matches the amount of content, only a few 
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make use of this option. 


And finally, maintain structural elements of each wizard page through the sequence. For example, don't move 
the Back button from the upper-left corner back down into the commit buttons area for a page or two. This level 
of layout consistency helps users feel stable within the wizard. Think of this as a baseline for the visual integrity of 
a page. 


Finding the right level of communication 


Users have a low tolerance for reading big blocks of text on screen, and even less so within a UI surface whose 
express purpose is to move expeditiously through a task. 


Wizards have a tendency to over-communicate. They take up a lot of space on the screen, which seems to 
encourage a drive to fill the space. It's like a variation on Parkinson's Law: UI text will expand to fill the space 
available. 


One culprit in this excess is redundancy. Because of templates used in early wizard design, the same language 
might appear in multiple locations on a page, such as in the title bar, headings, body text, control labels, and so 
on. 


It's worth it to hire a professional editor to prune your wizard text ruthlessly. Eliminate unnecessary questions 
and options on individual pages, and eliminate entire pages from the wizard as a whole (for example, the 
traditional Welcome and Congratulations pages). Get right to the point of the page with a concisely written main 
instruction, using language your target audience uses to describe the task, not the jargon of the technology or 
feature that you or your team uses internally. This user-centric approach is vital to improving the communication 
of your program's wizards. 


Pay special attention to the tone of your wizard: sometimes the most lasting impressions of your program are the 
result not of what you say but how you say it! In wizards, users are comfortable with a friendly, conversational 
tone, with liberal use of the second-person pronoun ("you") when the program is asking for input. For more 
guidelines, see Style and Tone. 


Reducing word count on the wizard page is generally commendable, but be careful not to go too far. If the task is 
important and warrants a wizard, users do appreciate having enough information to make wise choices. The 
following example shows how wizard text can be condensed without sacrificing meaning. 


Before: 


Ww) ClearType Text Tuner 


ClearType Text Tuning 


The ClearType tuning wizard will lead you through a series of steps to allow you to tune Clearlype 
to your preferences. 


Turn on ClearType and then click next to begin tuning. 


(¥) ClearType 


ClearType is a software technology developed by Microsoft that improves the 
readability of text on existing LCDs (Liquid Crystal Displays), such as laptop screens, 
Pocket PC screens and flat panel monitors. With ClearType font technology, the words 
on your computer screen look almost as sharp and clear as those printed on a piece of 


paper. 
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After: 


© ClearType Text Tu 
Make the text on your screen easier to read 


(¥) Turn on ClearType 


ClearType is a software technology developed by Microsoft that improves the 
readability of text on existing LCDs (Liquid Crystal Displays), such as laptop screens, 
Pocket PC screens and flat panel monitors. With ClearType font technology, the words 
on your computer screen look almost as sharp and clear as those printed on a piece of 


paper. 


The edited version of this wizard page provides a task-oriented main instruction, removes the unnecessary 
explanatory paragraph beneath the main instruction, and revises the check box label to clarify the check box's 
purpose. 


If you do only three things... 

1. Map the task you are trying to accomplish with the appropriate UI to do the job; don't simply default to a 
wizard when you think you need to collect a lot of input from users. 

2. Think carefully about the length and structure of your wizard; prefer short, non-branching wizards to keep the 
experience as simple as possible, so users can get back to their primary task or interest in your program. 

3. Ensure the integrity of each page in your wizard: the contents of a page should clearly belong together. 


Guidelines 
General 
- Consider lightweight alternatives first, such as dialog boxes, task panes, or single pages. You don't have to use wizards—you 
can provide helpful information and assistance in any UI. 


- Use wizards for multi-step tasks. Use multi-page dialog boxes for single-step tasks with feedback. For more guidelines, see Dialog Boxes. 


Correct: 
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Detecting problems 


we eee 


© 7S) Windows Network Diag 


Troubleshooting couldn't identify the problem 


You can try exploring other options that might be helpful. 
> Explore additional options 


> Close the troubleshooter 


View detailed information 


In this example, Windows Network Diagnostics consists of progress and results pages. Because the task is only a 
single step, it does not require the navigational buttons that users need in a wizard. It is effectively presented as a 
multi-page dialog box. 


Window size 


- Choose a window size that can display all the wizard pages without vertical or horizontal page scrolling. While the controls on 
the page may require scrolling, the wizard pages themselves must not. 


- Size windows large enough to perform their tasks comfortably. Page layout shouldn't be cramped or require users to scroll or 
resize excessively. 


- But don't make windows excessively large. Larger windows make the task feel more complex and require additional movement 
for interaction. 


« Use resizable windows for a wizard that can benefit from more screen space but doesn't require it. Assign an appropriate 
minimum size. Resizable windows are helpful when pages require interacting with resizable content such as large list views. 


Correct: 
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(3) Microsoft Visual Studio 2010 Premium Setup - Install Page 


Microsoft® : 
OOPVisual Studio 2010 Premium Setup 


Installing Components: 


Microsoft Visual F# 2.0 Runtime 

TFS Object Model (x86) 

Microsoft Visual Studio 2010 Premium 

Microsoft ASP.NET MVC 2 - Visual Studio 2010 Tools 

Microsoft Visual Studio 2010 Tools for Office Runtime (x86) 
Microsoft Office Developer Tools (x86) 

Dotfuscator Software Services - Community Edition 

Crystal Reports templates for Visual Studio 2010 

Microsoft SQL Server Compact 3.5 SP2 (x86) ENU 

Visual Studio 2010 Tools for SQL Server Compact 3.5 SP2 ENU 
Microsoft Sync Framework Runtime v1.0 (x86) ENU 

Microsoft Sync Services for ADO.NET v2.0 (x86) ENU 

Microsoft Sync Framework Services v1.0 (x86) ENU 

Microsoft Sync Framework SDK v1.0 (x86) ENU 

Microsoft Visual Studio 2010 Performance Collection Tools (x86) 
Microsoft SOL Publishina Wizard 1.4 


Copying new files 


Better: 


CG Microsoft Visual Sai 209 Premium Setup Insel Pose aA 


Micpsot ; 
COPVisual Studio 2010 Premium Setup 


Installing Components: 


¥ Microsoft Visual F# 2.0 Runtime 

¥ TFS Object Model (x86) 

a) Microsoft Visual Studio 2010 Premium 

"= Microsoft ASP.NET MVC 2 - Visual Studio 2010 Tools 

l= Microsoft Visual Studio 2010 Tools for Office Runtime (x86) 

l= Microsoft Office Developer Tools (x86) 

us Dotfuscator Software Services - Community Edition 

i= Crystal Reports templates for Visual Studio 2010 

il = Microsoft SQL Server Compact 3.5 SP2 (x86) ENU 

us Visual Studio 2010 Tools for SQL Server Compact 3.5 SP2 ENU 
l= Microsoft Sync Framework Runtime v1.0 (x86) ENU 

i= Microsoft Sync Services for ADO.NET v2.0 (x86) ENU 

us Microsoft Sync Framework Services v1.0 (x86) ENU 

"= Microsoft Sync Framework SDK v1.0 (x86) ENU 

l= Microsoft Visual Studio 2010 Performance Collection Tools (x86) 
l= Microsoft SQL Publishing Wizard 1.4 

uss Microsoft SQL Server 2008 R2 Data-Tier Application Framework 
ll Microsoft SQL Server 2008 R2 Data-Tier Application Project 

l= Microsoft SQL Server 2008 R2 Transact-SQL Language Service 
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Microsoft SQL Server 2008 R2 Transact-SQL Language Service 


Microsoft SharePoint Developer Tools 


Directory: 
File: Copying new files 


In this example, resizing the window helps users see the full list. 


- Consider using dynamically sized wizards whose page size changes as needed for its content. Doing so allows a wizard 
to accommodate page layouts with a wide range of content. 


- Prefer static sizing over dynamic if users may perceive the changes as a lack of stability in their experience of the wizard. 
Visual stability often trumps accommodation of content. Most wizards should adopt standard, static window sizes, with dynamic 
sizing reserved for special cases. 


Wizard length 


Make your wizard as concise and streamlined as possible. Get rid of unnecessary options and questions, and use smart defaults, 
to reduce the number of pages required for user input. 
o Exception: IT professionals and other technical users have a higher tolerance for longer wizards and detailed input requirements. 


Make your wizard a minimum of two pages. A one-page wizard should be redesigned as a dialog box instead. 


Don't reduce the wizard's page count simply by increasing the complexity of each page. For example, a wizard page that includes 
three tabs requiring user input should be redesigned as three separate pages. 


Don't increase the wizard's page count by making each page so simple that users mindlessly click Next through the whole 
sequence. This is a common wizard design flaw. If a wizard page does not require at least some degree of thought, it probably 
doesn't need to be in the wizard at all. 


Branching 


- Prefer non-branching wizard design over branching. Non-branching wizards tend to be simpler, shorter, and easy to 
navigate. Branching wizards make it more difficult for users to determine how many steps in the task, and where they are in 
the sequence. 


- If you must branch, help users orient themselves by using one of the following techniques: 
o Enumerate pages. A common technique is to indicate the user's location in the sequence on each page, such as with the phrase Step 
X of Y. Ensure that the endpoint (Y) is stable. If it changes value, this undermines users’ confidence. 


Include the notion of sub-steps (such as Step 2a of 6). 


o Make steps independent of pages, where each step may involve several pages. For example, a travel service might employ 
wizard organization based on well-established e-commerce conventions for the industry. 


oO 


Correct: 


Flights Confirm Travelers Seats Review Payment Itinerary 


Logical labels can provide adequate orientation for users of a branching wizard. 


Treat optional steps as persistent in the enumeration sequence. For example, if a branch is just skipping a few optional steps, just 
skip the steps in the feedback as well, rather than renumbering. Thus if a user makes a choice on page 2 that results in making pages 
3 and 4 optional, show steps 1, 2, 5, and 6 of 6. Don't renumber steps 5 and 6. 


If the wizard employs a single branch, and the branch happens early in the task, start the sequence at that point, and then simply 
use the non-branching approach. That is, beginning at the point of the branch, progress in sequence to the end of the branch. 


° 


° 


- If you must branch, limit the number of branches to one or two within a single wizard. Never include more than one branch within 
a branch (a "nested" branch). 


Commit buttons 


- When users are committing to a task, use a commit button that is a specific response to the main instruction (for example, 
Print, Connect, or Start). Don't use generic labels like Next (which doesn't imply commitment) or Finish (which isn't specific) 
for committing a task. The labels on these commit buttons should make sense on their own. Always start commit button labels with 
a verb. Exceptions: 


o Use Finish when the specific responses are still generic, such as Save, Select, Choose, or Get. 
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o Use Finish to change a specific setting or a collection of settings. 
A single wizard can have multiple commit points, but a single point is preferred. 


If necessary, you can rename or hide commit buttons on a page. This flexibility is one advantage of new wizard design in Windows 
that was not available in older wizards. Note that hiding a commit button is different from disabling it. 


Avoid disabling a positive commit button. Otherwise users have to deduce why the commit buttons are disabled. It's better to 
leave commit buttons enabled, and give a helpful error message whenever a problem arises. Disabling the button is only acceptable 
if the reason for doing so is obvious and unambiguous. 


Don't confuse navigational buttons (Next and Back) with commit buttons. Next means to progress in the wizard without 
commitment; Back should always be available on the next page, and clicking Back should undo the effect of the last Next button. 
If that's not possible, users are making a commitment, and that is indicated through a specific label on the commit button. For 
more guidelines about the Next and Back buttons, see Navigation. 


Cancel buttons 


- Don't ask users to confirm whether they really intend to cancel. Doing so can be annoying. Exceptions: 
o The action has significant consequences and, if incorrect, is not readily fixable. 


o The action may result in a significant loss of the user's time or effort. 
o The action is clearly inconsistent with other actions. 
- Allow users to restart wizards in case they have cancelled by mistake. 


- Don't disable the Cancel button. Exceptions: 
o If cancelling is harmful, which might be the case when doing a task in self-contained wizards. 


o If cancelling is impossible, which might be the case when the wizard doesn't have control over all steps. 
Close buttons 


- Use Close for Follow-Up and Completion pages. Don't use Cancel, because closing the window won't abandon any changes or 
actions done at this point. Don't use Done, because it isn't an imperative verb. 


- Once the task has been performed, Cancel should become Close (for self-contained wizards). The effect of Close is simply to close 
the window. 


Other controls 


« Use command links only for choices, not commitments. Specific commit buttons indicate commitment far better than command 
links in a wizard. 


« When using command links, hide the Next button, but leave the Cancel button. 
Using pages (vs. dialog boxes or inline UI) 


- In general, prefer pages to dialog boxes. Users expect wizards to be page-based. 

- Use dialog boxes to assist in completing pages, such as with object pickers and browsers. 

- Use dialog boxes to give error messages that apply to the whole page, and result from clicking a commit button. 
- Use inline presentation for simple dynamic behaviors, such as progressive disclosure and contextual UI. 

- Use inline presentation for error messages that apply to specific controls. 


Wizard pages 


- Focus on efficient decision making. Reduce the number of pages to focus on essentials. Consolidate related pages, and take 
optional pages out of the main flow. Having users click Next completely through your wizard may seem like a good experience at 
first, but if users never need to change the defaults, the pages are probably unnecessary. 


- Design each page to have a single purpose and visual consistency. For more information, see Page integrity. 


- Don't use Welcome pages—make the first page functional whenever possible. Use an optional Getting Started page only when: 
o The wizard has prerequisites that are necessary to complete the wizard successfully. 


o Users may not understand the purpose of the wizard based on its first Choice page, and there isn't room for further explanation. 
o The main instruction for Getting Started pages is "Before you begin:". 


Incorrect: 
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4) Microsoft MapPoint North America 2006 Setup 


Welcome! 


The Installation Wizard will quide you through the process of 
installing MapPoint 2006 onto your computer. To start the 
installation process, click Next. 


Modern wizards opt for functional first pages. Here there is nothing to do but click Next. Why force users to pay 
this token tax on their valuable time? 


- On pages in which users are asked to make choices, optimize for the most likely cases. These types of pages should present 
actual choices, not just instructions. 
o If you don't use a Getting Started page, explain the purpose of the wizard at the top of the first page of choices. 


- Use Commit pages to make it clear when users are committing to the task. Usually the Commit page is the last page of choices, and 
the Next button is relabeled to indicate the task being committed. 
o Don't use Summary pages that merely summarize the user's previous selections, unless the task is risky (involving security, or loss 
of time or money) or there is a good chance that users need to review their selections. 


- Use Progress pages to show the status of a lengthy operation. Upon successful completion, the progress page should advance to 
the next step automatically. It should stay on the progress page only if there is a problem the user needs to see. Clicking Back to 
a progress page should have no side effect. 
o Use a single, determinate progress bar. Follow the determinate progress bar guidelines, including: 
= Clearly indicate completion. Don't let a progress bar go to 100 percent unless the operation has completed. 
= Don't restart progress. A progress bar loses its value if it restarts (perhaps because a step in the operation completes) because 


users have no way of knowing when the operation will complete. Instead, have all the steps in the operation share a portion of 
the progress and have the progress bar go to completion once. 


o Provide a concise description of the current step above the progress bar. For quick operations, such text is unnecessary; the 
progress bar alone is sufficient. For operations requiring a minute or longer, text can be helpful. 
a Use sentence fragments, typically beginning with a verb, and ending with an ellipsis. Examples: Copying files..., Installing 
required components.... 


= Place text above the bar, not below. 


Incorrect: 


att 
Installing Microsoft Office Enterprise 2007... 
In this example, the explanatory text should appear above the progress bar. 
= Refrain from cluttering the progress page with unnecessary details. This page isn't for technical support; it's for users. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 554 of 882 


Status: 
775C7345-367FR-3759-A82T-C4AE6A901FD82 


SO 


In this example, technical details such as GUIDs are meaningless to users. 


- Don't use Congratulations pages that do nothing but end the wizard. If the wizard results are clearly apparent to users, just close 
the wizard on the final commit button. 
o Use Follow-Up pages when there are related tasks that users are likely to perform as follow-up. Avoid familiar follow-up tasks, such 
as "Send an e-mail message." 


o Use Completion pages only when the results aren't visible and there's no better way to provide feedback for task completion. 


o Wizards that have Progress pages must use a Completion page or Follow-Up page to indicate task completion. For long-running 
tasks, close the wizard on the Commit page and use notifications to give feedback. 


« Use Summary pages only if input is complex and users need to review, if the task involves significant risk (such as a 
financial transition), or if the wizard will take action based on user input that isn't obvious (to build trust through 
transparency). Often, summary pages don't meet this relevancy bar, and can be omitted. 


- Use error pages if the wizard can't be completed due to a problem from which recovery isn't possible. On this page, explain what 
the problem is in clear language, free of technical jargon users won't understand. Also provide practical steps users can take to solve 
the problem. For more guidelines, see Error Messages. 
o Exception: If the wizard completes with a minor problem from which recovery is possible, present the problem as an additional 
task instead of an error. Use positive, success-oriented, encouraging language, not terms like error, failure, or problem. Don't use 
an error icon. 


Navigation 


Use Next only when advancing to the next page without commitment. Advancing to the next page is considered a commitment 
when its effect can't be undone by clicking Back or Cancel. 


Use Back only to correct mistakes. Aside from correcting mistakes, users shouldn't have to click Back to make progress in a task. 


Preserve user selections through navigation. For example, if the user makes changes, clicks Back and then Next, those changes 
should be preserved. Users don't expect to have to re-enter changes unless they explicitly chose to clear them. 


Don't disable the Back button unless repeating the steps is harmful. 


Permit users to browse or revise choices in the following navigation scenarios: 
o User gives input, clicks commit button, clicks Back to review previous changes, doesn't change anything, and then clicks commit 
button again. Normally, this should be possible and the second commit should just advance to the next page (because the task 
has already been done). 


o User gives input, clicks commit button, clicks Back to review previous changes, changes something, and then clicks commit button 
again. Normally, this should be possible and the second commit should redo the task with the changed input (replacing or undoing 
the effect of the first). 


Help 


Design wizard pages to provide enough information so that referring to documentation in program Help is unnecessary. A wizard 
is already taking users away from their desired, direct interaction with the program; requiring users to seek external Help removes 
them even further from this state. Help should be the exception, not the rule. 


If you must provide an access point to Help, use a link in the lower-left portion of the content area of the page (above the 
command area). This link should be brief, and usually phrased in the form of a question that users are most likely to want answered. 


Correct: 
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‘€) is Connect to a Workplace 


How do you want to connect? 


> Use my Internet connection (VPN) 
Connect using a virtual private network (VPN) connection through the Internet. 


ij @  & 


> Dial directly 
Connect directly to a phone number without going through the Internet. 


je 


What is a VPN connection? 


This link to Help is appropriate because basic background information like this would clutter the wizard page too 
much. 


Text 
General 


- Use you and your to refer to the user and the user's computer, document, settings, and so on. Don't use the first person (I, my) to 
refer to the computer or the wizard. However, it is acceptable to use the first person in options that the user selects. Example: My 
use only check box. 


« Every wizard page must have a main instruction. 


Titles 


« Put the name of the wizard in the title bar. Use title-style capitalization. 


+ Titles shouldn't include punctuation, except for those with question marks. 
- Don't include the word Wizard in wizard titles. For example, use Connect to a Network instead of Network Setup Wizard. 


Buttons 


Don't include text on the Back button. Use the arrow glyph instead, unlabeled. 


- Do include text on the Next button. Don't use glyphs (such as >or >>) in addition to the word Next. 


« Use specific commit button labels that make sense on their own and are a response to the main instruction. Ideally users shouldn't 
have to read anything else to understand the label. Users are far more likely to read command button labels than static text. 


If possible, don't use the word Finish for the commit button label, because there is usually a better, more specific commit button: 


o If clicking the button commits to the task (so the task hasn't already been performed), use a specific label that starts with a verb that is 


a response to the main instruction (examples: Print, Connect, Start). 
o If the task has already been performed within the wizard, use Close instead. 


Exceptions: 
o You can use Finish when the specific label is still generic, such as Save, Select, Choose, or Get. 


o You can use Finish when the task involves changing a setting or collection of settings. 
- Start commit button labels with a verb. Exceptions are OK, Yes, and No. 
. Use sentence-style capitalization. 


- Don't use ending punctuation. 
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Documentation 


« Although most Windows wizards no longer have the word Wizard in the title, it's acceptable to refer to wizards as wizards 
in documentation. This reference should be lowercase. 


Correct: 
If you're setting up a network for the first time, you can get help by using the Connect to a Network wizard. 


« Some legacy wizards from earlier versions of Windows might include Wizard in the title. When referring to one of those wizards, 


it's acceptable to use the [X] Wizard to avoid saying the [X] Wizard wizard. 
- Refer to an individual screen within a wizard as a page. 
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Property Windows 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Property sheets 
Options dialog boxes 
Property pages 
Owned property windows 
Tabs 
Command buttons 
Commit buttons 
Page contents 
Help 
Standard users and Protected administrators 
Default values 
Text 
Documentation 


Property window is the collective name for the following types of user interfaces (UIs): 


- Property sheet: used to view and change properties for an object or collection of objects in a dialog box. 
- Property inspector: used to view and change properties for an object or collection of objects in a pane. 
- Options dialog box: used to view and change options for an application. 


A property for an object is either of the following: 


- Asetting that users can change (such as a file's name and read-only attribute). 
- An attribute of an object that users cannot directly change (such asa file's size and creation date). 


Unlike dialog boxes (other than options dialogs) and wizards, property windows typically support several tasks 
instead of a single task. 


Property windows are usually organized into pages, which are accessed through tabs. Property windows are 
often associated with tabs (and vice versa), but tabs are not essential to property windows. 
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+ Documents Properties 


File Folder 
D:\Users\Jonathan 

65.2 MB (68,455,632 bytes) 
66.1 MB (69,328,896 bytes) 
338 Files, 149 Folders 


Wednesday, December 06, 2006, 4:44:03 PM 


Faden 


Hidden 


A typical property sheet. 


Note: Guidelines related to layout, tabs, and control panels are presented in separate articles. 


Is this the right user interface? 
To decide, consider these questions: 


- Does setting the properties require users to perform a fixed, non-trivial sequence of steps? If so, use a wizard or task flows instead. 
- Isthe content solely an application's options? If so, use an options dialog box. 
Is the content solely an application's attributes? If so, use an About box. 


- Isthe content mostly an object's properties (its settings or attributes)? If not, use a standard dialog box or tabbed dialog box. 


Are users likely to view or change properties frequently or over an extended period of time? If so, use a property inspector; 
otherwise, use a property sheet. 


Are users likely to view or change properties for several different objects at a time? If so, use a property inspector; otherwise, use 
a property sheet. 


Property sheets and property inspectors aren't exclusive. You can display the most frequently accessed 
properties in a property inspector, and the complete set in the property sheet. 


Design concepts 


Property windows often become a dumping ground for an odd assortment of low-level, technology-based 
settings. Too often, these properties are organized into tabs, but beyond that not designed for any particular 
tasks or users. As a result, when users are faced with a task in a property window, they often don't know what to 


do. 
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To ensure that your property windows are useful and usable, follow these steps: 


- Make sure the properties are necessary. 

- Present properties in terms of user goals, not technology. 

- Present properties at the right level. 

- Design pages for specific tasks. 

- Design pages for specific users, especially limited users (non-administrators). 


- Organize the property pages efficiently. 


If you do only one thing... 

Present properties in terms of user goals, not technology. Pretend that you are explaining the property and why 
it is useful to a friend. How would you explain it? What language would you use? That's the language to use in 
your property pages. 


For more information and examples, see Property Window Design Concepts. 


Usage patterns 
Property windows have several usage patterns. 


- Property sheets. Properties for a single object are displayed in a modeless dialog box. 

- Multiple-object property sheets. Properties for multiple objects are displayed in a modeless dialog box. 

- Effective settings property sheets. The effective properties for a single object are displayed in a modeless dialog box. 
- Options dialog boxes. Properties for an application are displayed in a modal dialog box. 


- Property inspectors. Properties for the current selection (a single object or group of objects) are displayed in a modeless window 
pane or undocked window. 


All property window patterns except property inspectors use a delayed commit, meaning that changes take effect 
only when users click OK or Apply. Property inspectors use an immediate commit (properties are changed as soon 
as users make changes), so there is no need for OK, Cancel, and Apply buttons. 


For more information and examples, see Property Window Usage Patterns. 


Guidelines 
Property sheets 


- Display a property sheet when users: 
o Select the Properties command for an object. 


> Set input focus on an object and press Alt+énter. 
Multiple-object property sheets 


- Display the common properties of all the selected objects. Where the property values differ, display the controls associated with 
those values using a mixed state. (See the respective control guidelines for using mixed-state values.) 


- If the selected object is a collection of multiple discrete objects (such as a file folder), display the properties of the single 
grouped object instead of a multiple-object property sheet for the discrete objects. 


Options dialog boxes 


- Don't separate options from customization. That is, don't have both an Options command and a Customize command. Users are 
often confused by this separation. Instead, access customization through options. 


Property pages 


- Follow these guidelines for page order: 
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o Make the General page or its equivalent the first page. 
o Make the Advanced page or its equivalent the last page. 


o For the remaining pages: 
= Organize them into groups of related pages. 


= Order the groups by the likelihood of their usage. 
a Within each group, order the pages either by their relationships or by the likelihood of their use. 
= You shouldn't have so many pages that there is a need to display them in alphabetical order. 

- Make pages coherent by relating all properties on each page to a single, specific, task-based purpose. 


- If space allows, explain the purpose of the property window at the top of the page if it isn't obvious to your target users. If the page 
is used to perform only a single task, phrase the text as a clear instruction about how to perform that task. Use complete 
sentences, ending with a period. 


@ Windows Firewall Properties 


General | Exceptions | Advanced | 


Some properties are managed by your system administrator. 


Why can't I change some properties? 


Windows Firewall can help prevent hackers or malicious software from gaining 
access to your computer through the Internet or a network. 


9) On (recommended) 
This setting blocks all outside sources from connecting to this 
computer, except for those unblocked on the Exceptions tab. 
|| Block all incoming connections 
Select this option when you connect to less secure networks. All 


exceptions will be ignored and you will not be notified when 
Windows Firewall blocks programs. 


Off (not recommended) 


Avoid using this setting. Turning off Windows Firewall will make this 
computer more vulnerable to hackers or malicious software. 


Tell me more about these properties 


Lo) [cancel] 


In this example, the purpose of Microsoft ®@W indows®Firewall is explained at the top of the General page. 


- Make similar content consistent across pages by using consistent control names and locations. For example, if several pages 
have Name boxes, try to place them in the same location on the page and use consistent labels. Similar content shouldn't 
bounce around from page to page. 


- Place the same property on the same page throughout your application. For example, don't put an Expiration property on the 
General tab for one object type, and on the Advanced tab for another type. 


- If users are likely to start with the last page displayed, make the page tab persist, and select it by default. M ake the settings persist 
on a per-property window, per-user basis. Otherwise, select the first page by default. 


- Don't make the settings on a page dependent upon settings on other pages. Put the dependent settings on a single page 
instead. Changing a setting on one page should never automatically change settings on other pages. 
o Exception: If the dependent settings are in two different property windows, use static text labels to explain this relationship in both 
locations. 


- Don't scroll property pages. Both tabs and scrollbars are used to increase the effective area of a window, but one mechanism should 


be sufficient. Instead of using scrollbars, make the property pages larger and lay out the pages efficiently. 
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First pages 


- For object properties, put the object's name on the first page. 
- If you are associating (optional) icons with your objects, display the appropriate icon in the upper-left corner of the first page. 


General pages 


- Avoid General pages. You aren't required to have a General page. Use a General page only if: 
o The properties apply to several tasks and are meaningful to most users. Don't put specialized or advanced properties on a General 
page, but you can make them accessible through a command button on the General page. 


o The properties don't fit a more specific category. If they do, use that name for the page instead. 


Advanced pages 


- Avoid Advanced pages. Use an Advanced page only if: 
o The properties apply to uncommon tasks and are meaningful primarily to advanced users. 


o The properties don't fit a more specific category. If they do, use that name for the page instead. 


- Don't call properties advanced based solely on technological measures. For example, a printer stapling option may be an 
advanced printer feature, but it is meaningful to all users, so it shouldn't be on an Advanced page. 


Owned property windows 
- Don't display more than one owned property window from a property window. Displaying more than one makes the meaning of 
the OK and Cancel buttons difficult to understand. You can display other types of auxiliary dialog boxes (such as object pickers) 
as needed. 


Incorrect: 


Internet Options 


Certificate purposes 

(@) Enable all purposes for this certificate 
») Disable all purposes for this certificate 
») Enable only the following purposes 


Note: You may only edit certificate purposes that are allowed by 
the certification path. 


Server authentication 
Client authentication 
Secure email 

Private key archival 


| r 


Add purpose... 


Tell me more about certificate properties 
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Tell me more about certificate properties 


Lo | [Anny 


In this example, the owner options dialog box has three levels of owned property windows. Asa result, the 
meanings of OK and Cancel are confusing. 


- For property windows that use a delayed commit model, make sure users can cancel changes made in an owned property window 
by clicking Cancel on the owner window. 


- Ifan owned property window requires an immediate commit, indicate that changes were committed by renaming the Cancel 
button on the owner window to Close. Revert the button back to Cancel if the user clicks Apply. 


Check spelling as you type 

Hide spelling errors in this document 
Always suggest corrections 
Suggest from main dictionary only 
Ignore words in UPPERCASE 

Ignore words with numbers 

Ignore Internet and file addresses 


SIS SO8 808 


Grammar 

[¥] Check grammar as you type 

["] Hide grammatical errors in this document 
[¥] Check grammar with spelling 

["] Show readability statistics 

Proofing tools 


In this example, changes to custom dictionaries and grammar settings can't be cancelled. You can give users this 
feedback by changing Cancel to Close. 


Other owned windows 


- If an owned window is used to perform an auxiliary task, don't rename the Cancel button. The preceding guidelines apply only 
to owned property windows, not dialog boxes used to perform auxiliary tasks. 
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< New Volume (F:) Properties 


The Disk Cleanup utility is cleaning up unnecessary files 
< on your machine. 


[=] Compress this drive to save disk space 
[¥] Index this drive for faster searching 


In this example, Disk Cleanup is an auxiliary task, so the previous guidelines don't apply. For example, the Cancel 
button on the owner window shouldn't be changed to Close. 


- If the owned window is used to perform an auxiliary task, don't close the owner property window when the command button 
is clicked. Doing so is disorienting and assumes that the only reason the user displayed the property window was to perform 
that command. 


Incorrect: 
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File encryption options for this document 
Password toopen: | 


File sharing options for this document 
Password to modify: | 


[| Read-only recommended 
Privacy options 
[-] Remove personal information from file properties on save 
[-] Warn before printing, saving or sending a file that contains tracked 
changes or comments 
Store random number to improve merge accuracy 
[¥] Make hidden markup visible when opening or saving 
Macro security 
Adjust the security level for opening files that might Macro security... 


contain macro viruses and specify the names of 
trusted macro developers. 


Loc} [cancel 


In this example, clicking Protect document incorrectly closes the Options dialog box. 


- Use concise tab labels. Use one or two words that clearly describe the content of the page. Longer labels result in an inefficient use 
of screen space, especially when the labels are localized. 


- Use specific, meaningful tab labels. Avoid generic tab labels that could apply to any tab, such as General, Advanced, or Settings. 


- Use horizontal tabs if: 
o The property window has seven or fewer tabs (including any third-party extensions). 


o All the tabs fit on one row, even when the UI is localized. 
o You use horizontal tabs on the other property windows in your application. 


. Use vertical tabs if: 
o The property window has eight or more tabs (including any third-party extensions). 


o Using horizontal tabs would require more than one row. 
o You use vertical tabs on the other property windows in your application. 
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Popular ei how cocumen cots eit a 
Ss 


Proofing Page display options 


Save Show white space between pages in Print Layout view “) 
waeas Show highlighter marks @ 
ee Show document tooltips on hover 


Advanced 
Always show these formatting marks on the screen 
Customize 
[=] Tab characters 


Add-ins Fl Spaces 
Trust center [| Paragraph marks 

[) Hidden text 

[-] Optional hyphens 

[] Object anchors 

[| Optional breaks 

[-] Show all formatting marks 


Resources 


Printing options 


[¥] Print drawings created in Word 
[] Print background colors and images 
[-] Print document properties 

[] Print hidden text 

[] Update fields before printing 

[-] Update linked data before printing 


In this example, vertical tabs are used to accommodate eight or more tabs. 


- For property inspectors, to conserve space, consider using a drop-down list instead of tabs, especially if the current tab is 
rarely changed by the user. 


- Ifa tab doesn't apply to the current context and users don't expect it to, remove the tab. Doing so simplifies the UI, and users 
won't miss it. 


Incorrect: 
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Microsoft Office Word 2003 


Options: 

ill Add space for underlines 

|_| Adjust line height to grid height in the table 

|] Align table rows independently 

[-] Allow table rows to lay out apart 

|] Allow tables to extend into margins 

|] Auto space like Word 95 

|_| Balance SBCS characters and DBCS characters 

|] Combine table borders like Word 5.x for the Macintosh 
|_| Convert backslash characters into yen signs 

| ]Do full justification like WordPerfect 6.x for Windows 
|] Don't add automatic tab stop for hanging indent 

|] Don't add extra space for raised/lowered characters 
|] Don't add leading (extra space) between rows of text 


In this example, the File Locations tab is incorrectly disabled when Microsoft Word 2003 is used as an e-mail 
editor. The page should be removed because users wouldn't expect to view or change file locations in this context. 


- Ifa tab doesn't apply to the current context and users might expect it to: 
o Display the tab. 


o Disable the controls on the page. 
o Include text explaining why the controls are disabled. 


Don't disable the tab because doing so isn't self-explanatory and prohibits exploration. Furthermore, users looking for a 
specific property would be forced to look on all other tabs. 
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Show 


[¥] Startup Task Pane _—[V] Smart tags [¥] Windows in Taskbar 


[¥] Highlight [¥] Animated text ["] Field codes 
_] Bookmarks ] Horizontal scroll bar Field shading: 
[¥] Status bar [¥] Vertical scroll bar When selected ~ 


/| ScreenTips |_| Picture placeholders 


Formatting marks 


Tab characters |_| Hidden text 


|_| Spaces [_] Optional hyphens 


Paragraph marks All 


nt and web layout options 
[(¥] Drawings [(¥] White space between pages (Print view only) 


Object anchors Background colors and images (Print view only) 


|_| Text boundaries [¥] Vertical ruler (Print view only) 


ine and normal options 


[_] Wrap to window Style area width: o* — 
|_|Draft font: Name: |Courier New [x] Size: | 10 ly 


ti) These options do not apply in Reading Layout. 


In this example from Word 2003, none of the View options apply in Reading Layout. However, users might expect 
them to apply based on the tab label, so the page is displayed but the options are disabled. 


- Don't assign effects to changing tabs. Changing the current tab should never have side effects, apply settings, or result in an 
error message. 


- Don't nest tabs or combine horizontal tabs with vertical tabs. Instead, reduce the number of tabs, use only vertical tabs, or use 
another control such as a drop-down list. 


- Don't use tabs if a property window has only a single tab and isn't extensible. Use a regular dialog box with OK, Cancel, and 
an optional Apply button instead. Extensible property windows (which can be extended by third parties) always need to use tabs. 


- Don't put icons on tabs. Icons usually add unnecessary visual clutter, consume screen space, and often don't improve 
user comprehension. Only add icons that aid in comprehension, such as standard symbols. 


Incorrect: 


System Properties 


Windows uses the following information to identify your computer 
on the network. 


In this example, the graphics add unnecessary visual clutter and do little to improve user comprehension. 


- Don't use product logos for tab graphics. Tabs aren't for branding. 
Don't scroll horizontal tabs. Horizontal scrolling isn't readily discoverable. You may scroll vertical tabs, however. 


Incorrect: 
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General | Debug | C/C++ Link | Resource LP] 


In this example, the horizontal tabs are scrolled. 
Command buttons 


- Place command buttons that apply to all property pages at the bottom of the property window. Right-align the buttons and use 
this order (from left to right): OK, Cancel, and Apply. 


- Place command buttons that apply only to individual property pages directly on the property page. 
Commit buttons 
OK buttons 


For owner property windows, the OK button means apply the pending changes (made since the window was opened or the 
last Apply), and close the window. 


For owned property windows, the OK button means keep the changes, close the window, and apply the changes when the 
owner window's changes are applied. 


Don't rename the OK button. Unlike other dialog boxes, property windows aren't used to perform any one specific task. If it 
makes sense to rename the OK button (to Print, for example), the window isn't a property window. 


Don't assign an access key. 
Cancel buttons 


- The Cancel button means discard all pending changes (made since the window was opened or the last Apply), and close the window. 
- If all pending changes can't be abandoned, rename the Cancel button to Close. Clicking Cancel must abandon all pending changes. 


- If the owned property window requires an immediate commit, rename the Cancel button on the owner window to Close to 
show that changes were committed. 


- Don't assign an access key. 
Apply buttons 


- For owner property sheets, the Apply button means apply the pending changes (made since the window was opened or the 
last Apply), but leave the window open. Doing so allows users to evaluate the changes before closing the property sheet. 


For owned property sheets, don't use. Using an Apply button on an owned property sheet makes the meaning of the commit 
buttons on the owner property sheet difficult to understand. 


Provide an Apply button only if the property sheet has settings (at least one) with effects that users can evaluate ina 
meaningful way. Typically, Apply buttons are used when settings make visible changes. Users should be able to apply a change, 
evaluate the change, and make further changes based on that evaluation. If not, remove the Apply button instead of disabling it. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 569 of 882 


System Properties 


Computer name | Hardware | Advanced | System protection | Remote 


Device manager 
The Device Manager lists all the hardware devices installed 
on your computer. Use the Device Manager to change the 
properties of any device. 


Windows update driver settings 
Cal Choose whether to check Windows Update for driver 
| 


software. 


Windows update driver settings 


In this example, none of the system properties have a visual effect, so the Apply button has no value and should 
be removed. 


- Place all settings that users may want to apply on owner pages. Don't use Apply buttons on owned property sheets, because doing 
so is confusing. 


- Use Apply buttons only with property sheets, not with options dialog boxes. 
- Enable the Apply button only when there are pending changes; otherwise, disable it. 
- Assign "A" as the access key. 


Close buttons 


- If all pending changes can't be abandoned, rename the Cancel button to Close. Clicking Cancel must abandon all pending changes. 
- Don't confirm if users discard their changes. 
o Exception: If the property window has settings that require significant effort to set and the user has made changes, you may display a 
confirmation if the user clicks the Close button on the title bar. The reason is that some users mistakenly assume that the Close 
button on the title bar has the same effect as the OK button. 


- With the exception of the confirmation message, make sure the Close button on the title bar has the same effect as Cancel or Close. 
Page contents 


- Make sure the properties are necessary. Don't clutter your pages with unnecessary properties just to avoid making hard 
design decisions. 


- Present properties in terms of user goals, not technology. | ust because a property configures a specific technology doesn't mean 
that you must present the property in terms of that technology. 
o If you must present settings in terms of technology (perhaps because your users recognize the technology's name), include a brief 
description of how the user benefits from that setting. 


- Present properties at the right level. You don't need to present individual, low-level settings on a property page, so present 
the properties at a level that makes sense to your users. 


- Design property pages for specific tasks. Determine the tasks that users will perform, and make sure there is a clear path to 
perform those tasks. 
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- Organize property pages efficiently by reducing the number of tabs, deciding what goes on a page based on logical grouping 
and coherence, and simplifying the page's presentation. 


For more information, see Property Window Design Concepts. 


- Ifan option is strongly recommended, consider adding "(recommended)" to the label. 


- Provide a Restore Defaults command button for a property page or the entire property window when: 
o Your users are likely to consider the settings complex and difficult to understand. 


o Having incorrect settings may result in breaking functionality, but the defaults might restore functionality. 
o It's easier for users to start over when the object is misconfigured. 


@ Windows Firewall Properties 


| General | Exceptions | Advanced 


Network connection properties 


Select the check box for each connection you want Windows Firewall to help 
protect. 


Network connections: 


Local area connection 


Default properties 


Restoring defaults will remove all Windows Firewall properties that you have 
configured for any network location. This may cause some programs to stop 
working. 


Where can I find ICMP and logging settings? 


In this example, the Windows Firewall settings are complex and may result in broken functionality. If there's a 
problem, it is often easier for users to start over by clicking Restore Defaults. 


Confirm the Restore Defaults command if its effect isn't obvious or the settings are complex. Indicate the confirmation by using ellipses. 
- When appropriate, display a preview of the results of a setting. 
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Help select 


Working in background 


In this example, the page displays a preview of the pointer schemes. While clicking Apply also shows a preview, 
having a preview on the page is more efficient for users. 


Segoe Script “ 
Segoe UI Italic 
Showcard Gothic 

Shruti 

SimHei 


Effects 


[Strikethrough [©] Shadow 
[-] Double strikethrough [© Outline 
[F) Superscript [©] Emboss 
[) Subscript [) Engrave 


Preview 


This is a TrueType font. This font will be used on both printer and screen. 
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In this example, the Preview box shows the results of the font settings. This example shows that you can preview 
settings that aren't graphical. 


Help 


- When providing user assistance, consider using the following options (listed in their order of preference): 
o Give interactive controls self-explanatory labels. Users are more likely to read the labels on interactive controls than any other text. 


o Provide in-context explanations using static text labels. 
o Provide a specific link to a relevant Help topic. 


- Locate Help links at the bottom of each page. If a page has several distinct groups of settings that have a Help topic (perhaps 
within group boxes), locate the Help link at the bottom of the group. 


- Don't use general or vague Help topic links or generic Help buttons. Users often ignore generic Help. 


For more information and examples, see Help. 


Standard users and Protected administrators 


Many settings require administrator privileges to change. If a process requires administrator privileges, 
Windows®and later requires Standard users and Protected administrators to elevate their privileges explicitly. 
Doing so helps prevent malicious code from running with administrator privileges. 


For more information and examples, see User Account Control. 
Default values 


- The settings within a property window must reflect the current state of the application, object, or collection of objects. 
Doing otherwise would be misleading and possibly lead to undesired results. For example, if the settings reflect the 
recommendations but not the current state, users might click Cancel instead of making changes, thinking that no changes are needed. 


- Choose the safest (to prevent loss of data or system access) and most secure initial state. Assume that most users won't change 
the settings. 


- If safety and security aren't factors, choose the initial state that is most likely or convenient. 
Text 
Commands 


- To display program options, use "Options." 

- To display an object's property window, use "Properties." 

- To display a summary of the commonly used program customization settings, use "Personalize." 
- Don't use "Settings" or "Preferences." 

- Don't use ellipses for these commands. 


Property sheet titles 


- Fora single object, use "[object name] Properties." 
o If the object has no name, use the object's type name. (For example, User Account Properties.) 


- For multiple objects, use "[first object name], ... Properties." 
o If the objects have no names, use the objects' type name. (For example, User Accounts Properties.) 


o If the objects have different types, use "Selection Properties." 
- Use title-style capitalization. 
- Don't use ending punctuation. 
- Don't use hyphens, such as "[object name] - Properties." 


Property inspector titles 
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- Use "Properties." 
- Use title-style capitalization. 
- Don't use ending punctuation. 


Options dialog box titles 


- Use "Options." 
- Use title-style capitalization. 
- Don't use ending punctuation. 


Property page tab names 


- Use concise tab labels. Use one or two words that clearly describe the content of the page. Using longer tab names results in 
an inefficient use of screen space, especially when the tab names are localized. 


- Use specific, meaningful tab labels. Avoid generic tab labels that could apply to any tab, such as General, Advanced, or Settings. 
- Write the label as a one- or two-word phrase and use no ending punctuation. 
- Use sentence-style capitalization. 


- Don't assign a unique access key. 
Property page text 


- Avoid large blocks of text. 
- Provide enough room for the text to expand 30 percent if it will be localized. 


- Don't use text phrased as a command on property windows. Because users might want to simply view settings, you don't want 
to prompt them to change settings. 


- Use sentence-style capitalization and ending punctuation. 
Documentation 
When referring to property windows: 


- In programming and other technical documentation, refer to property sheets and options dialog boxes as property sheets. 
Everywhere else, use dialog box, especially in user documentation. 


- Use the exact title text, including its capitalization. 
- To describe user interaction, use open and close. 
- When possible, format the title using bold text. Otherwise, put the title in quotation marks only if required to prevent confusion. 


When referring to property pages: 


- In programming and other technical documentation, refer to property pages as property pages. Everywhere else, use tab, especially 
in user documentation. 


- Use the exact title text, including its capitalization. 
- To describe user interaction, use click to refer to clicking a tab. 
- When possible, format the name using bold text. Otherwise, put the name in quotation marks only if required to prevent confusion. 
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Property Window Design Concepts 


Property Windows 
Property Window Usage Patterns 


Note: This section applies primarily to property sheets and options dialog boxes, but also applies to property 
inspectors to a lesser degree. 


Make property windows usable 


Developers often simplify their program's user interfaces (UIs) by focusing on the primary 80 percent of the 
program, and giving users a way to handle the remaining 20 percent through property windows. This can be an 
excellent approach, but if not done carefully, it may result in poorly designed property windows. 


Property windows often become a dumping ground for an odd assortment of low-level, technology-based 
settings. Too often, these properties are organized into tabs, but beyond that not designed for any particular 
tasks or users. As a result, when users are faced with a task in a property window, they often don't know what to 
do. 


To ensure that your property windows are useful and usable, follow these steps: 


- Make sure the properties are necessary. 

- Present properties in terms of user goals, not technology. 

- Present properties at the right level. 

- Design pages for specific tasks. 

- Design pages for Standard users and Protected administrators. 


- Organize the property pages efficiently. 


Make sure the properties are necessary 


Of course you want your program to be powerful and flexible, but too much choice can be overwhelming for 
users. Review all the properties in your property windows and do the following: 


- Identify a task that requires the property. 
- Identify a target user for the property. 
- Assign a probability that the target user will actually use the property. 


If the probability is low (perhaps because doing so violates a best practice), consider removing the property. 
Don't clutter your property pages with unnecessary properties just to avoid making hard design decisions. 
Focus on the probable, not the possible. 


Present properties in terms of user goals, not technology 


Although a property configures a specific technology, you don't have to present it in terms of that technology. 
Compare the following settings: 
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Technology-based: 


("| Enable internet connection sharing host 
("| Manual duplex 


In these examples, properties are presented in terms of technology. 


Goal-based: 


(Allow other network users to connectth rough this 
computer's internet connection 


[| Print on both sides of paper 


In these examples, the same properties are presented in terms of user goals. 


A simple way to evaluate property page text is to pretend that you are explaining the property and why it is 
useful to a friend. How would you explain it? What language would you use? Most likely you would explain the 
setting using plain language in terms of the user's goals (such as printing on both sides of paper) instead of 
obscure technology (such as manual duplex). That's the language to use in your property pages. 


If you must present properties in terms of technology (perhaps because your target users recognize the 
technology's name), also include a brief description of the actual benefit to the user of the property. 


If you do only one thing... 

Present properties in terms of user goals, not technology. Pretend that you are explaining the property and why 
it is useful to the target user in person. How would you explain it? What language would you use? That's the 
language to use in your property pages. 


Present properties at the right level 


Sometimes individual low-level settings don't correlate to users' goals. You don't have to present individual, low- 
level settings in a property page, so present the properties at a level that makes sense to the target user. 


Consider this sample of the low-level, technology-based security settings in Windows®Internet Explorer @ 


Too low level: 
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e& Security Settings - Internet Zone 


@ Disable 
© Enable 

| Allow websites to prompt for information using scripted wind 
@ Disable 
© Enable 

| Scripting of Java applets 
© Disable 
@® Enable 
© Prompt 

&, User Authentication 

88, Logon 
© Anonymous logon 
@ Automatic logon only in Intranet zone 
© Automatic logon with current user name and password a 
© Prompt for user name and password cz, 


«(pel eel 
*Takes effect after you restart Internet Explorer 


Reset custom settings 


Reset 


Lo) (cancel | 


This example shows a small portion (about 15 percent) of the low-level Windows Internet Explorer security 
settings. 


Few users know if they want to enable or disable these settings, but they do know their high-level goals, such as 
wanting to browse the Internet safely while still maintaining most functionality. Consequently, the Windows 
Internet Explorer security settings are presented in terms of goal-based levels: 


Better: 
Security level for this zone 
Allowed levels for this zone: Medium to High 
Medium-high 
- Appropriate for most websites 
- Prompts before downloading potentially unsafe 
content 


- Unsigned ActiveX controls will not be downloaded 


Enable Protected Mode (requires restarting Internet Explorer) 


— ss 
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In this example, the collection of settings is presented in terms of users' goals. 


If users need to change individual settings, they can choose the most appropriate built-in security level, and then 
create a custom level. 


Design pages for specific tasks 


When designing and evaluating pages, determine the common tasks that users perform and make sure there is 
a clear path to perform those tasks. Users typically perform the following types of tasks with property windows: 


- View an object's current settings and attributes. 

- Change an object's settings. 

- Perform tasks related to an object's settings and attributes. 

- Troubleshoot an object's settings to determine why it doesn't behave as expected. 

- Restore or roll back an object's settings to some known functional state (such as its default settings). 


To determine if a property window supports specific tasks, write a one-sentence description of the purpose of 
each group of properties, and determine how well the supported tasks map to those descriptions. You don't 
need to put these descriptions in the property windows, but you should if the goals aren't obvious. 


@> Internet Properties 


| General | Security | Privacy Content Connections | Programs | Advanced 


Content Advisor 


Ratings help you control the Internet content that can be 
viewed on this computer. 


Enable... ©) Settings 


Certificates 
re Use certificates for encrypted connections and identification. 


AutoComplete — 


= AutoComplete stores previous entries 
= | on webpages and suggests matches 
for you. 


Feeds provide updated content from 


websites that can be read in Internet 
Explorer and other programs. 
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In this example, the Windows Internet Explorer Content tab has one-sentence descriptions for each group of 
settings. 


Design pages for Standard users and Protected administrators 
Many settings require administrator privileges to change. If a process requires administrator privileges, 
Windows Vista and later requires Standard users and Protected administrators to elevate their privileges 


explicitly. Doing so helps prevent malicious code from running with administrator privileges. 


For more information and examples, see User Account Control. 


Organize property windows efficiently 


The most common user complaints about property windows are the use of too many tabs and the inclusion of 
too much content on property pages. Here are some techniques to address both of these problems. 


Reducing the number of tabs 


Traditionally, Windows has used horizontal tabs, which work best with a single row (a maximum of five to seven 
tabs). You can use vertical tabs, which do a better job of handling more tabs. Even so, if you have more than 12 
tabs, you have too many. 


To reduce the number of tabs, identify the properties that users are least likely to need. Then put those settings 


into a dialog box displayed using a command button instead of placing them directly on a page. This technique 
works well if you want to encourage users to maintain the default settings. 
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erent 
Browsing history 


Ee Delete temporary files, history, cookies, saved passwords, 
7) and web form information. 


Search 
center cetats 


Tabs 


IS Spree tow none ae eed 


Appearance 


In this example, the Windows Internet Explorer General tab reduces the number of tabs by moving infrequently 
changed settings to separate dialog boxes. 


Of course, you can have too few tabs. 


Incorrect: 
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— Destination 


( System registry 
© Kernel mode 
Image file options 


Image file name: 
Launch | Command line: FE 


[ Show loader snaps 
[ Debug initial command 


[- Enable heap tail checking 

[ Enable heap free checking 

[ Enable heap parameter checking 
[- Enable heap validation on call 

[~ Enable application verifier 


[” Enable pool tagging 

.” Enable heap tagging 

[ Create user mode stack trace database 
[” Create kernel mode stack trace database 
|.” Maintain a list of objects for each type 
[ Enable heap tagging by DLL 

[ Load DLLs top-down (VvVin64 only) 

[” Enable bad handles detection 


[ Enable debugging of Y¥in32 subsystem 
[” Enable loading of kernel debugger symbols 
. Disable paging of kernel stacks 

[ Enable system critical breaks 

. Disable heap coalesce on free 

. Enable close exception 

. Enable exception logging 

[ Enable object handle type tagging 

| Enable page heap 

[ Debug YINLOGON 

. Buffer DbgPrint output 

.” Disable protected DLL verification 

[” Early critical section event creation 


Kernel Special Pool Tag 
C Hex [ 
@ Text 


C Verify start (@ Verify end 


Apply | Cancel | 


In this example, tabs should be used to organize the settings. 
Deciding what goes on a page 


To decide which properties should go on a page, consider the properties' grouping and coherence. Properties 
are grouped well when: 


- The settings on the page are related or even dependent upon each other. 
- The settings on a page are not related or dependent upon settings on other pages. 


Changing a setting on one page should never change a setting on another page. 


Properties are coherent when: 
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- All the properties on the page relate to a single concept. 
- The concept is specific. 
- The concept is based on tasks or goals, not technology. 


You can determine coherence by reviewing the tab labels. Specific labels are a strong sign of coherence; generic 
labels like General and Advanced are not. 


Simplifying a page 


Beyond making sure the properties are necessary and presented at the right level, you can simplify a property 
page's presentation using these techniques: 


- Use larger property pages. Don't be afraid to use screen space. 


- Use more compact controls: 
o Group controls with separators instead of group boxes. 


o Use list boxes instead of many individual radio buttons. 
o Use check box lists instead of many individual check boxes. 
o Use drop-down lists instead of list boxes. 
o Use split buttons for a group of related controls instead of individual command buttons. 
- Move advanced or infrequently used settings to a separate dialog box, displayed using a command button. 


. If the page has weak grouping and coherence, split up the page and move the properties to a new page ora 
generic page, such as General or Advanced. 
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Property Window Usage Patterns 


Property Windows 
Property Window Design Concepts 


Property windows have several usage patterns. 


Property sheets A property sheet is modal with respect to objects—users can't change the properties’ object without closing and 
Properties fora —redisplaying the dialog box. Property sheets use a delayed commit: changes take effect only when users click OK 
single object are or Apply. 

displayed in a 
modeless dialog 
box. 


Microsoft Office Word Document (.docx) 


(Mec Ofc We 


D:\Users\Jonathan\Desktop 


169 KB (173,568 bytes) 
172 KB (176,128 bytes) 


Thursday, May 10, 2007, 9:53:38 AM 
Thursday, May 10, 2007, 9:53:38 AM 
Thursday, May 10, 2007, 9:53:38 AM 


Piety EDM 


In this example, the properties of a single object are displayed in a modeless dialog box. 
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Multiple-object — This is like a normal property sheet, but it displays only those properties that are meaningful to the collection of 


property sheets objects. Any setting changes are applied to all the underlying objects. 


Properties for 
multiple objects 
are displayed in 


(i UXGuide, ... Properties 


a modeless 
dialog box. 
: General 
| 2 Files, 0 Folders 
All of type Text Document 
All in D: Users\Jonathan\Desktop 
34.5 KB (35,328 bytes) 
36.0 KB (36,864 bytes) 
i Read-only 
| Hidden 
In this example, the property sheet displays properties of multiple objects. The mixed-state check box indicates 
that some but not all of the selected files are read-only. Changes to this attribute would be applied to all the 
underlying files. 
Effective This can be used when an object's actual properties are determined not only by the object's direct settings, but 
settings also by all its parent objects’ settings (for example, this is the case for Group Policy). The controls are disabled 


property sheets because users cannot change them. 


The effective 
properties for a 
single object are 
displayed in a 
modeless dialog 
box. 
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Options dialog 
boxes 
Properties for an 
application are 
displayed ina 


modal dialog box. 


Autoenrollment Settings Properties 


Enroll user and computer certificates automatically 


© Disable automatic certificate management 


@ Enable automatic certificate management 


| Enroll new certificates, renew expired certificates, process pending 
certificate requests and remove revoked certificates 


Update and manage certificates that use certificate templates 
from Active Directory 


Backup encryption certificates and keys that are not archives on a 
certificate authority 


Publish encryption certificates to user account 


In this example, the property sheet displays the effective Group Policy, which is determined by the object's 


properties and the properties of all its parents. 


Like property sheets, options dialog boxes use a delayed commit, so changes take effect only when users click OK. 


Unlike property sheets, options dialog boxes: 


- Consist of application settings, but not application attributes. About boxes are used to display application 


attributes. 
- Are modal to the application. 
- Rarely need an Apply button. 
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cm Specify settings for organizing and sharing your digital media 
collection. 


Sharing 
Share my media with other computers Configure sharing 
and devices on my network. = 


Update library by monitoring folders 

Sereor pln a 
monitors for digital media files. Monier folders... 

|] Delete files from computer when deleted from library 


Automatic media information updates for files 
[¥] Retrieve additional information from the Internet 


|] Rename music files using rip music settings 
[-] Rearrange music in rip music folder, using rip music settings 
[¥] Maintain my star ratings as global ratings in files 


In this example, an application's options are displayed in a dialog box. 


Property Unlike property sheets, property inspectors display the properties of the currently selected objects. They use an 
inspectors immediate commit (properties are changes as soon as users make changes), so OK, Cancel, and Apply buttons 
Properties for aren't needed. 

the current 

selection (a 


single object or 
group of objects) 
are displayed in 
a modeless 
window pane or 
undocked 
window. 
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_< FormlL.cs [Design]? Properties| ~™x 


1 System.Windows.Forms.MonthCalendar ~ 
g2|2) [| ¥ |S 
E) Accessibility a 
AccessibleDescription 
AccessibleName a 
AccessibleRole Default . 
E] Appearance 
BackColor [| Window 
CalendarDimensions ye | 
Cursor Default 
Font Microsoft Sans Serif, 8.25pt 
ForeColor i WindowText 
RightToLeft No 
RightToLeftLayout False 
TitleBackColor al ActiveCaption 
TitleForeColor iro ActiveCaptionText 
TrailingForeColor Hy GrayText 
UseWaitCursor False A 


In this example from M icrosoft®Visual Studio® an object's properties are displayed in a grid within a modeless 
window pane. 


Autumn Leaves.jpg 
11/5/2005 9:12AM 
269 KB (1024x 768) 


WwW Wiss 
® Add Tags 


& <Add Caption> 


In this example, a picture's properties are displayed in a modeless window pane. All the properties except for Size 
can be changed by the user. 
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Visuals 


These articles discuss the aesthetic issues you'll need to consider as you design the user experience for your 
Windows@based applications: 


Layout 


- Fonts 


- Color 

- Icons 

- Standard Icons 

- Animations and Transitions 
Graphic Elements 

- Sound 
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Layout 


Design concepts 
Guidelines 

Screen resolution and dpi 

Window size 

Control size 

Control spacing 

Placement 

Focus 

Alignment 

Accessibility 
Recommended sizing and spacing 
Layout Metrics 


Layout is the sizing, spacing, and placement of content within a window or page. Effective layout is crucial in 
helping users find what they are looking for quickly, as well as making the appearance visually appealing. 
Effective layout can make the difference between designs that users immediately understand and those that 
leave users feeling puzzled and overwhelmed. 


Note: Guidelines related to window management are presented in a separate article. Recommended specific 
control sizing and spacing are presented in their respective guideline articles. 


Design concepts 
Visual hierarchy 


A window or page has a clear visual hierarchy when its appearance indicates the relationship and priority of its 
elements. Without a visual hierarchy, users would have to figure out these relationships and priorities 
themselves. 


Visual hierarchy is achieved by skillfully combining the following attributes: 


Focus. The layout indicates where users need to look first. 


Flow. The eye flows smoothly and naturally by a clear path through the surface, finding user interface (UI) elements in the 
order appropriate for their use. 


Grouping. Logically related UI elements have a clear visual relationship. Related items are grouped together; unrelated items 
are separate. 


Emphasis. UI elements are emphasized based on their relative importance. 


Alignment. The U! elements have coordinated placement, so they are easy to scan and appear orderly. 


Additionally, effective layout has these attributes: 


Device independence. The layout appears as intended regardless of the font typeface or size, dots per inch (dpi), display, or 
graphic adaptor. 


Easy to scan. Users can find the content they are looking for at a glance. 


Efficiency. Ul elements that are large need to be large, and elements that are small work well small. 


Resizability. If helpful, a window is resizable and its content layout is effective no matter how large or small the surface is. 
Balance. The content appears evenly distributed across the surface. 


Visual simplicity. The perception that a layout is not more complicated than it needs to be. Users don't feel overwhelmed by 
the layout's appearance. 


Consistency. Similar windows or pages use a similar layout, so users always feel oriented. 


While sizing, spacing, and placement are simple concepts, the challenge with layout is to achieve the right 
mixture of these attributes. 


In Microsoft ®Windows® layout is communicated using device independent metrics such as dialog units (DLUs) 
and relative pixels. For more information about these layout metrics, their measurement, and their conversion, 
see Layout Metrics. 


A design model for reading 


Users choose what they read by the content's appearance and organization. To create an effective layout, you'll 


need to understand what users tend to read and why. 
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You can make layout decisions using this design model for reading: 


- People read in a left-to-right, top-to-bottom order (in Western cultures). 
- There are two modes of reading: immersive reading and scanning. The goal of immersive reading is comprehension. 


This diagram models immersive reading. 


By contrast, the goal of scanning is to locate things. The overall scan path looks like this: 


This diagram models scanning. 


If there is text running along the left edge of a page, users scan the left edge first. 


- When using software, users aren't immersed in the UI itself but in their work. Consequently, users usually don't read Ul text—they 
scan it. They then read bits of text comprehensively only when they believe they need to. 


« Users tend to skip over navigation panes on the left or right side of a page. Users recognize that they are there, but look at 
navigation panes only when they want to navigate. 


- Users tend to skip over large blocks of unformatted text without reading them at all. 


El 


Eneean ip rine wae een ae 


Sewn GET GOS ane, COMME SOSIENE et OMS CUS K Boe! owCEr veRZER nus 
(ett Oem Rane ken, RNNem agen SRT HR MRT A tem Sori Canney ame OF 
Weroroe taxa de pos cde oun mec eree mast lee ote ok heen oct Vows wu 


Users tend to skip over large blocks of text and navigation panes when they scan. 


- All things being equal, users first look in the upper left corner of a window, scan across the page, and end their scan in the lower 
right corner. They tend to ignore the lower left corner. 


© 2010, Microsoft Corporation. All rights reserved. Page 590 of 882 


1 2 


All things being equal, users will read these numbers in the following order: 1, 2, 4, and 3. 
« But in interactive UI, not all things are equal so different UI elements receive different levels of attention. Users tend to look 


at interactive controls—especially controls in the upper left and center of the window—and prominent text first. 


Use the computer without a display 


[|] Turn on Narrator 


[i< 


Turn on Audio Description 


[=] Turn off all unnecessary animations (when possible) 


How long should Windows notification dialog boxes stay open? 


7.0 seconds Sd 


Users focus on the main interactive controls and the prominent main instruction, and look at other things only 
when they need to. 


Users tend to read interactive control labels, especially those that appear relevant to completing the task at hand. By contrast, 
users tend to read static text only when they think they need to. 


Items that appear different attract attention. Bold text and large text stands out from normal text. Ul items with color or ona 
colored background stand out. Items with icons stand out from items without icons. 


« Users don't scroll unless they have a reason to. If the content above the fold doesn't provide a reason to scroll, they won't. 


Once users have decided what to do, they immediately stop scanning and do it. 


Because users stop scanning when they think they are done, they tend to ignore anything beyond what appears to be the point 
of completion. 
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COuU- © «Make the keyboard easier to use v | +4] | Search Pp 


Make the keyboard easier to use 
When you select these settings, they will automatically start each time you log on. 


Control the mouse with the keyboard 


Turn on Mouse Keys 


Use the numeric keypad to move the mouse around the screen. 


Set up Mouse Keys 


Make it easier to type 
[¥] Turn on Sticky Keys 


Press keyboard shortcuts (such as CTRL+ALT+DEL) one key at a time. 


Set up Sticky Keys 


Users stop scanning when they think they're done. 


Of course, there will be exceptions to this general model. Eye tracking devices indicate that real users' behavior is 
quite erratic. The goal of this model is to help you make good decisions and tradeoffs, not to model user behavior 
accurately. But as you've read this list, hopefully you've recognized many of your own reading patterns, too. 


Designing for scanning 


Users don't read, they scan—so you should design UI surfaces for scanning. Don't assume that users will read 
the text as written in a left-to-right, top-to-bottom order but rather that they look at the UI elements that attract 


their attention. 


To design for scanning: 


« Assume that users start by quickly scanning the whole window, then reading the UI elements in roughly the following order: 


1. 


Interactive controls in the center 


2. The commit buttons 

3. Interactive controls found elsewhere 
4. Main instruction 

5 
6 
7 
8 


Supplemental explanations 


. Text presented with a warning icon 
. Window title 

. Other static text in main body 

9. 


Footnotes 


- Place UI elements that initiate a task in the upper-left corner or upper-center. 


- Place Ul elements that complete a task in the lower-right corner. 


« Whenever possible, put crucial text on interactive controls instead of static text. 


- Avoid putting crucial information in the lower-left corner or at the bottom of along scrollable control or page. 


- Don't present big blocks of text. Eliminate unnecessary text. Use the inverted pyramid presentation style. 


- If you do something to attract users’ attention, make sure that attention is warranted. 


Whenever possible, work with this model rather than fighting it; but there will be times when you need to either 
emphasize or de-emphasize particular UI elements. 


To emphasize primary UI elements: 


- Put primary UI elements in the scan path. 


orb Yb ARK, 


Yasoirblats esas inthsgineetlele gamer or upper-centr. 
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Put commit buttons in the lower-right corner. 


Put the remaining primary UI in the center. 


« Use controls that attract attention, such as command buttons, command links, and icons. 

« Use prominent text, including large text and bold text. 

« Put text users must read in interactive controls, or with icons, or on banners. 

- Use dark text on a light background. 

« Surround the elements with generous space. 

- Don't require any interaction, such as pointing or hovering, to see the element you are emphasizing. 


© w Windows Activation 


Activate Windows now 


You must activate Windows today or Windows will stop working. 


> Activate Windows online now 


> Show me other ways to activate 


Read our privacy statement online 


This example shows many ways to emphasize primary UI elements. 
To de-emphasize secondary UI elements: 


« Put secondary UI elements outside the scan path. 

- Put anything users usually don't need to see in the lower-left corner or bottom of the window. 
« Use controls that don't attract attention, such as task links instead of command buttons. 

« Use normal or gray text. 

« Use light text on a dark background. White text on a dark gray or blue background works well. 
« Surround the elements with minimal space. 

- Consider using progressive disclosure to hide secondary UI elements. 
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(<1@ | 5» « Network and Sharing Center vy | + | 


Search 


Tasks A 
Network and Sharing Center 
View computers and devices 

Connect to a network 

Set up a connection or network A 


Manage network connections 


Diagnose and repair (This computer) 


= corp.microsoft.com (Domain network) 


Access Local and Internet 


Connection 


Jonathan corp.microsoft.com 


Local Area Connection 


B Sharing and Discovery 
Network discovery 
File sharing 
See also Public folder sharing 


Internet Options Printer sharing 


Windows Firewall 


Media sharing 


This example shows many ways to de-emphasize secondary UI elements. 


Using screen space effectively 


Using screen space effectively requires you to balance several factors: use too much space and a window feels 


heavy and wasteful, and even difficult to use based on Fitts' Law. 


Incorrect: 


Protection against malicious and unwanted software 


ye Select scan options 


How do you want Windows Defender 
to scan your computer? 


© Quick scan 


© Full system scan 


@ Scan selected dives and folders 
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View full map 


Internet 


Windows 
Defender 


Page 594 of 882 


In this example, the window is too large for its content. 


On the other hand, use too little space and a window feels cramped, uncomfortable, and intimidating, and 
difficult to use if it requires scrolling and other manipulation to use. 


Incorrect: 


é& Indexing Options 


547 items indexed 


be Indexing speed is reduced due to user activity. 


Index these locations: 


Induded Locations 


gLocal Disk (C:) 
‘1; Microsoft Office OneNote (S... 


How does indexing affect searches? 


In this example, the window is too small for its content. 


While critical Ul must fit in the minimum supported effective resolution, don't assume that using screen space 
effectively means that windows should be as small as possible—they shouldn't be. Effective layout has respect 
for open space and doesn't attempt to cram everything into the smallest space possible. M odern displays have 
significant screen space and it makes sense to use this space effectively when you can. Consequently, err on the 
side of using too much screen space rather than too little. Doing so makes your windows feel lighter and more 
approachable. 


You know a layout is using screen space effectively when: 


- Windows, window panes, and controls don't have to be resized to be usable. If the first thing users do is resize a window, pane, 
or control, its size is wrong. 


- Data isn't truncated. M ost data in list views and tree views doesn't have ellipses, and data in other controls isn't clipped unless the 
data length is unusually large. Data that must be read to perform a task shouldn't be truncated. 


« The windows and controls are sized appropriately to eliminate unnecessary scrolling. There are few horizontal scrollbars and 
no unnecessary vertical scrollbars. 


- Controls mostly use their standard sizes. Strive to reduce the number of control sizes, by, for example, using only one or two 
command button widths on a surface. 


- The Ul surface is balanced. There aren't large unused screen areas. 
Choose window sizes that are just large enough to fulfill their purpose well. (And if the window is resizable, this 
goal applies to its default size.) A combination of truncated data or scrollbars and plenty of available screen 
space is a clear sign of ineffective layout. 


Control sizing 


Usually the first step in using screen space effectively is to determine the right size for the various UI elements. 
® 301 : Mictosott Corp ration. a Nights roserved. g 
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Refer to the Control sizing table as well as the recommended sizing in the specific control guideline articles. 


Fitts' Law states that the smaller a target is, the longer it takes to acquire it with the mouse. Furthermore, for 
computers using Windows Tablet and Touch Technology, the "mouse" might actually be a pen or the user's 
finger, so you should consider alternative input devices when determining sizes for small controls. A control size 
of 16x16 relative pixels is a good minimum size for any input device. By contrast, the standard 15x9 relative 
pixel spin control buttons are too small to be used effectively by pens. 


Spacing 


Providing generous (but not excessive) space makes the layout feel more comfortable and easier to parse. 
Effective space isn't unused space—it plays an important role in improving the ability for users to scan, and also 
adds to visual appeal of your design. For guidelines, refer to the Spacing table. 


For computers using Windows Tablet and Touch Technology, again the "mouse" might actually be a pen or the 
user's finger. Targeting is more difficult when using a pen or finger as the pointing device, resulting in users 
tapping outside the intended target. When interactive controls are placed very close together but are not actually 
touching, users may click on inactive space between the controls. Since clicking inactive space has no result or 
visual feedback, users are often uncertain what went wrong. If small controls are too closely spaced, the user 
needs to tap with precision to avoid tapping the wrong object. To address these issues, the target regions of 
interactive controls should either be touching or have at least 3 DLUs (5 relative pixels) of space between them. 


You know a layout has good spacing when: 


- Overall, the UI surface feels comfortable and doesn't feel cramped. 

« The space appears uniform and balanced. 

- Related elements are close together and unrelated elements are relatively far apart. 

- There is no dead space between controls that are meant to be together, such as toolbar buttons. 


Resizable windows 


Resizable windows are also a factor in using screen space effectively. Some windows consist of fixed content and 
don't benefit from being resizable, but windows with resizable content should be resizable. Of course, the reason 
users resize a window is to take advanced of the additional screen space, so the content should expand 
accordingly by giving more space to the UI elements that need it. Windows with dynamic content, documents, 
images, lists, and trees benefit the most from resizable windows. 


GOuU- i « Personalization » Desktop Background y | +4 | | Search p 


Choose a desktop background 


Click a picture to make it your desktop background. To use a picture that's not listed, 
browse to the picture and double click it. 


Picture location: | Windows Wallpapers >| | Browse... 


Textures (7) 
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In this example, resizing the window resizes the list view control. 


That said, windows can be stretched too wide. For example, many control panel pages become unwieldy when 
the content is wider than 600 relative pixels. In this case, it's better not to resize the content area beyond this 
maximum width or change the content's origin as the window is resized larger. Instead, keep a maximum width 
and a fixed upper-left origin. 


Text becomes difficult to read as the line length increases. For text documents, consider a maximum line length 
of 80 characters to make the text easy to read. (Characters include letters, punctuation, and spaces.) 


Incorrect: 


(x} Can't open this item 
‘Microsoft® Windows® Operating System’ exited without properly closing your Outlook data file ‘C:\Documents and Settings\ 


Jeff\Local Settings\Application Data\Microsoft\Outlook\Outlook. pst’. ‘Microsoft Office Outlook’ must be restarted. If this error 
message recurs, contact support for ‘Microsoft® Windows® Operating System’ for assistance. 


In this example, the long text length makes for difficult reading. 


Finally, resizable windows also need to use screen space effectively when made smaller, by making resizable 
content smaller and by removing space from UI elements that can work effectively without it. At some point, the 
window or its UI elements become too small to be usable, so they should be assigned a minimum size or some 
elements should be removed completely. 


Documentl - Microsoft Word q 
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Some programs benefit from using a completely different presentation to make the content usable at smaller 
sizes. 


[5 Windows Media Player 


In this example, Windows M edia Player®changes its format when the window becomes too small for the 
standard format. 


Focus 


A layout has focus when there is one obvious place to look first. Focus is important to show users where to start 
scanning your window or page. Without clear focus, the user's eye will wander aimlessly. The focal point should 
be something important that users need to find and understand quickly, and should have the greatest visual 
emphasis. The upper-left corner is the natural focal point for most windows. 


There should be only one focal point. J ust as in real life, the eye can focus on only one thing at a time, users can't 
focus on multiple places simultaneously. 


To make a UI element the focal point, you can give it visual emphasis by: 


- Placing it in the upper-left or upper-center portion of the surface. 

« Using interactive controls that are important and readily comprehensible. 
« Using prominent text, such as a main instruction. 

« Giving the controls default selection and initial input focus. 

« Placing the controls in a different colored background. 


Consider Windows Search. The focal point for Windows Search should be the Search box because it is the starting 
point for the task. However, it is located in the upper-right corner to be consistent with the standard Search box 
placement. The Search box has input focus, but given its location in the scan path, that clue alone isn't sufficient. 


To address this problem, there is prominent instruction in the upper-center portion of the window to direct users 
to the right location. 


Acceptable: 


( Ve) ~P > Search Results y | +4] | Search 


Show only: (al) E-mail Document Picture Music Other Advanced search| v) 


To begin, type in the search box 


To search more of your computer, use Advanced Search. 


In this example, a prominent instruction in the upper-center portion of the window directs users to the Search box. 


Without the instructions, the window wouldn't have an obvious focal point. 


Incorrect: 
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CO} ~P » Search Results vy | +4] | Search Pp 


Show only: fal) E-mail Document Picture Music Other Advanced search| v) 
ti 


This example has no obvious focal point. Users don't know where to look. 
If you give a UI element visual emphasis, make sure that attention is warranted. In the previous incorrect 
Windows Search example, the highlighted All button is in the upper-left corner and has the most visual emphasis, 


but it's not the intended focal point. Users may get stuck looking at this button trying to figure out what to do 
with it. 


Incorrect: 


| Show only: (ai) E-mail 


Without the prominent instruction as the focal point, the highlighted All button is an unintentional focal point. 


Flow 


A layout has flow when users are guided smoothly and naturally by a clear path through its surface, finding UI 
elements in the order appropriate for their use. Once users identify the focal point, they need to determine how 
to complete the task. The placement of the UI elements conveys their relationship and should mirror the steps to 
perform the task. Typically, this means the task's steps should flow naturally in a left-to-right, top-to-bottom 
order (in Western cultures). 


You know a layout has good flow when: 


The placement of the UI elements mirrors the steps users need to perform the task. 
UI elements that initiate a task are in the upper-left corner or upper-center. 


UI elements that complete a task are in the lower-right corner. 


Related UI elements are together; unrelated elements are separate. 


Required steps are in the main flow. 


Optional steps are outside the main flow, possibly de-emphasized by using a suitable background or progressive disclosure. 


Frequently used elements appear before infrequently used elements in the scan path. 


Users always know what to do next. There are no unexpected jumps or breaks in the task flow. 


Incorrect: 
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Search for Group Policy Objects 


]search for GPOs in this domain: microsoft.com 


GPO 


§F Default Domain Controlleg 
& Default Domain Policy © 
4 um 


{6AC1786C-016F-11D2-945F 


{31B2F340-016D-11D2-945F 
r 


In this example, users don't know what to do next. There are unexpected jumps and breaks in the task flow. 


Correct: 


Search for Group Policy Objects 


a al for GPOs in this domain: 


search criteria to the list below: 


h this obiect: 


All search criteria: 


Domain 
microsoft.com 
microsoft.com 


{6AC1786C-016F-11D2-945F 
{31B2F340-016D-11D2-945F 
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| | Peers & SSD J 


In this example, the presentation of the UI elements mirrors the steps to perform the task. 
Grouping 


A layout has grouping when logically related UI elements have a clear visual relationship. Groups are important 
because it is easier for users to understand and focus on a group of related items than the items individually. 
Groups make a layout appear simpler and easier to parse. 


You can show grouping in the following ways (in increasing heaviness): 
« Layout. You can group related controls next to each other and put extra spacing between unrelated controls. 


System and Maintenance User Accounts 
Get started with Windows @ Change account type 


Back up your computer 
“A a ; Appearance and 
ry) Pats . eae Ay, Personalization 


t@y Allow a program through Windows Change desktop background 
© racial Customize colors 


Adjust screen resolution 


In this example, layout alone is used to show control relationships. 


- Separators. A separator is a horizontal or vertical line that unifies a group of controls. Separators provide a simpler, cleaner 
look. However, unlike group boxes, they work best when they span the full surface. 


E-mail accounts 
< Sy ‘Setup e-mail accounts and directories. 
34 


Send/Receive 


Set send and receive settings for e-mail messages and documents. 
(¥| Send immediately when connected Send/Receive... 
Data files 


vs Change settings for the files Outlook uses to store e-mail messages 
‘a 


and documents. 


In this example, labeled separators are used to show control relationships. 


- Aggregators. An aggregator is a graphic that creates a visual relationship between strongly related controls. 


Cx 0 | o (ie prriy © —e) 


In this example, a boundary aggregator is used to emphasize the relationship between the controls and make 
them feel like a single control instead of eight. 


- Group boxes. A group box is a labeled rectangular frame that surrounds a set of related controls. 
Privacy 


¥) Store and display a list of recently opened files 
¥) Store and display a list of recently opened programs 


In this example, a group box surrounds and labels a set of related controls. 


- Backgrounds. You can use backgrounds to emphasize or de-emphasize different types of content. 
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OvL- @ > Control Panel 


Control Panel Home 


System and Maintenance 
Security 

Network and Internet 
Hardware and Sound 
Programs 

User Accounts 


Appearance and 
Personalization 


Clock, Language, and Region 


Ease of Access 


Additional Options 


Classic View 


In this example, the control panel task pane is used to group related tasks and control panel items. 


To avoid visual clutter, the lightest weight grouping that does the job well is the best choice. For more 
information, see Group Boxes, Tabs, Separators, and Backgrounds. 


Regardless of the grouping style, you can use indenting to show the relationship of the controls within a group. 
Controls that are peers to each other should be left-aligned, and dependent controls are indented 12 DLUs or 18 
relative pixels. 


Dependent controls are indented 12 DLUS or 18 relative pixels, which by design is the distance between check 
boxes and radio buttons from their labels. 


You know a layout has good grouping when: 


« The window or pages has at most 7 groups. 

- The purpose of each group is obvious. 

« The relationship of controls within each group is obvious, especially control dependency. 
« The grouping simplifies the content rather than making it more complex. 


Alignment 


Alignment is the coordinated placement of UI elements. Alignment is important because it makes content easier 
to scan and affects users' perception of visual complexity. 


There are several goals to consider when determining alignment: 


- Ease in horizontal scanning. Users can read horizontally and find related items next to each other, without any awkward gaps. 


- Ease in vertical scanning. Users can scan columns of related items and immediately find what they are looking for, with 
minimal horizontal eye movement. 


- Minimal visual complexity. Users perceive a layout to be visually complex if it has unnecessary vertical alignment grid lines. 


Horizontal alignment 
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Left alignment 


Because of the left-to-right reading order, left alignment works well for most content. Left alignment makes 
columnar data easy to scan vertically. 


Right alignment 


Right alignment is the best choice for numeric data, especially columns of numeric data. Right alignment also 
works well for commit buttons as well as controls aligned with right window edge. 


Advanced search( v) 


| 


In this example, the Advanced search progressive disclosure control is right aligned because it is placed against 
the right window edge. 


Center alignment 


Center alignment is best reserved for situations where either left or right alignment is inappropriate or appears 
unbalanced. 


In this example, the media player control is centered to give a balanced appearance. 
Don't center window content just to fill space. 


Incorrect: 


‘€) Problem Reports and Solutions 


Choose how to check for solutions to computer problems 


Windows will send a description of each problem to Microsoft and look for steps you can take to solve it. 
Sending information about problems also helps create solutions. 
What information is sent? 


@ Check for solutions automatically (recommended) 
Notify me if I can take steps to solve a problem 


© Ask me to check if a problem occurs 


Advanced settings 
Read our privacy statement online 
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ok || Cancel 


In this example, content is incorrectly centered in a resizable window to fill space. 
Vertical alignment 
Element tops 


Because of the top-to-bottom reading order, top alignment works well for most content. Top alignment makes UI 
elements easy to scan horizontally. 


Text baselines 
When vertically aligning controls with text, align the text baselines to give a smooth horizontal reading flow. 


Correct: 


HIML.editor:. | Microsoft. Office. Word... ’ 


Incorrect: 


HIM 8a [eoaoht Office Word 3) 


In the correct example, the control and its label are vertically aligned by their text baselines. 
You know a layout has good alignment when: 


« Itis easy to scan both horizontally and vertically. 
- It has a simple visual appearance. 


Label alignment 


The general alignment rules apply to control labels, but it isa common problem worthy of specific attention. 
Label alignment has these goals: 


- Ease in vertical scanning to find the right control. 

- Ease in horizontal scanning to associate labels with their controls. 

- Ease in localization, handling labels that differ in length across languages. 
« Works well with a mixture of different label lengths. 

« Makes efficient use of available space while avoiding truncated text. 


The overall goal is to reduce the amount of eye movement required to find what users are likely looking for, but 
the nature of the controls and what users are looking for depends on the context. 


There are four common label placement and alignment styles, each with its benefits: 


- Left-justified labels above controls 

- Left-justified labels on left of controls 

- Left-justified labels on left of controls, controls ragged on left 
« Right-justified labels on left of controls 


Left-justified labels above controls 


This style is the easiest to localize because the layout doesn't depend upon the length of the labels, but it takes 
the most vertical space. 
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Authors: Manager: 


Jonathan Jonathan 
Tags: Company: 
vacation, desert Microsoft 
Title: Categories: 
Monument Valley Family photos 
Subject: Comments: 
Desert With family 


This style takes the most vertical space but is easiest to localize. It's a better choice for labeling mostly interactive 
controls. 


Best used when: 


+ The controls being labeled are interactive (not just text). 

- The UI will be localized. This style often affords room to double or even triple the length of the label. 
- The Ul is using a fixed layout technology (such as Win32). 

- There are ten or fewer controls. With more controls, the labels are hard to scan. 

- There is sufficient vertical space to accommodate the labels. 

« The layout needs to be free form, not just columns. 


Left-justified labels on left of controls 


This style is the easiest to scan vertically and it also works well when labels differ greatly in length, but it is harder 
to associate the label with its control. This style can use multi-line labels if necessary. 


Authors: Jonathan Manager: Jonathan 
Tags: vacation, desert Company: Microsoft 
Title: Monument Valley Categories: Family photos 
Subject: Desert Comments: With family 


This style works well. However, there are two columns but visually it looks like there are four—making the data 
appear more complex. 


Best used when: 


« Users are likely to scan vertically to find specific labels. 

« Users aren't likely to read the labels and controls in a left-to-right, top-to-bottom manner. 
« There is sufficient horizontal space to accommodate the labels. 

- The labels vary significantly in length. 

« There are many controls, such as with forms. 

- There are few columns. Visually the labels and controls appear as two individual columns. 


Left-justified labels on left of controls, controls ragged on left 


This style makes it easy to scan the labels vertically and the labels and controls horizontally, and is very space 
efficient; but it is harder to scan the controls vertically. The controls are right-justified to take full advantage of 
the available space. 


Authors: Jonathan Manager: Jonathan 

Tags: vacation, desert Company: Microsoft 
Title: Monument Valley Categories: Family photos 
Subject: Desert Comments: With family 


This style is compact and easy to read, but it's hard to scan controls vertically. 
Best used when: 


- The Ul is using a variable layout technology (such as Windows Presentation Foundation). 
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. Users are likely to scan vertically to find specific labels. 

« Users are likely to read the labels and controls in a left-to-right, top-to-bottom manner. 

« Users aren't likely to scan the controls vertically. 

- The control text varies in length and would likely be truncated if another style were used. 


- The controls are read-only, such as read only text boxes. For other controls, this alignment will look sloppy. However, the controls 
may become editable on click. 


« There are many columns, but few controls in a column. 


Right-justified labels on left of controls 


This style is the easiest to read horizontally to associate the labels with their controls, but it is hard to scan the 
labels vertically and doesn't work well when labelsList with indented labels and controls differ greatly in length. 


Authors: Jonathan Manager: Jonathan 
Tags: vacation, desert Company: Microsoft 
Title: Monument Valley Categories: Family photos 

Subject: Desert Comments: With family 


This style permits easy vertical scanning of the controls, but makes it hard to scan the labels vertically. 
Best used when: 


« Users are likely to read the labels and controls in a left-to-right, top-to-bottom manner. 


« Users aren't likely to scan vertically to find specific labels, possibly because: 
o There are few controls. 


o The labels are well known. 

o The controls are mostly self explanatory and are rarely blank (possibly having default values to prevent blank controls). 
« There is sufficient horizontal space to accommodate the labels. 
- The labels don't vary significantly in length. 
- There are many columns. Visually the labels and controls appear as a single column. 


Before adopting any of these styles, however, consider two more factors: 


- Prefer a style that you can use consistently across your program. 
- Left-justified labels either above controls on left of controls are the most common styles, so they should be given preference. 


Balance 


A window or page has balance when its content appears evenly distributed across its surface. If the surface 
physically had the same weighting as it has visually, a balanced layout wouldn't tip over to one side. 


The most common balance problem is having too much content on the left side of a window or page. You can 
create balance in the following ways: 


« Using larger margins on the left side than the right. 

- Placing UI elements used to complete a task on the right. 

- Placing Ul elements used throughout the task in the center. 
« Lengthening resizable or multi-line controls. 

- Using center-alignment strategically. 
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‘€) & Set up Speech Recognition 


Print the Speech Reference Card 


The Speech Reference Card is a list of commands the computer can respond to. 


Print out the list and keep it with you for a quick reference to the commands 
you can use with the computer. When you encounter a program or some other 
part of the computer that's difficult to control by voice, this list of commands 
can be very useful. 


View Reference Card 


This well balanced wizard page layout shows a larger left margin than right to improve balance. 


If these techniques don't achieve balance, consider reducing the width of the window or page to better match its 
content. 


For resizable surfaces, don't center content just to achieve balance. Rather, maintain a fixed upper left origin, 
define a maximum surface area, and balance the content within the space used. 


Grids 


A grid is an invisible underlying alignment system. Grids can be symmetrical, but asymmetric grids work just as 
well. When used by a single window or page, grids help organize content within a surface. When reused, grids 
create consistent layout across surfaces. 


The number of grid lines affect the perception of visual complexity. A layout with fewer grid lines appears simpler 
than a layout with more grid lines. 


Visually complex: 
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Computer name | Hardware | Advanced | System protection | Remote: 


atify your come 


i 


&, 
g 
_aa.—Ct—~—tst—‘ 


nzithan.Fabrikam.com 


a 


aaa Seacoast mast 


use a wizard t! 
Network 


=) 
pores. Sewer 


»mpujer or change its domain or 
Change. 


i 


SEAT ES mi ea oe 
5 
MC haan 2 


Visually simple: 


Computer seme 


a) 6 Windows uses the following information to ider'tify your computer 
on the network: \ 


For example: "Kitchen Comput! 
Computer”. 

Full computer name: athan.Fabrikam.com 
Fabrikam.com 


To use a wizard to join a domain or workgroup, click 
Network ID. 


To rename this computer pr change its domain or 


Unnecessary grid lines create visual complexity. 
You know a layout is using grids effectively when: 


- Windows or pages with similar content or function have similar layout. 
« Repeated design elements appear in similar locations across windows and pages. 
- There are no unnecessary vertical and horizontal alignment grid lines. 


Visual simplicity 
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Visual splay is the perception that a yout is not more complicated than it needs to be. 
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You know a layout has visual simplicity when it: 


Eliminates unnecessary layers of window chrome. 


Presents the content using at most seven easily identifiable groups. 


Uses lightweight grouping, such as layout and separators instead of group boxes. 


Uses lightweight controls, such as links instead of command buttons for secondary commands, and drop-down lists instead of lists 
for choices. 


Reduces the number of vertical and horizontal alignment grid lines. 


Reduces the number of control sizes, by, for example, using only one or two command button widths on a surface. 
Uses progressive disclosure to hide UI elements until they are needed. 


Uses sufficient space so that the window or page doesn't feel cramped. 


Sizes windows and controls appropriately to eliminate unnecessary scrolling. 


Uses a single font with a small number of sizes and text colors. 


As a general rule, if a layout element can be eliminated without harming the effectiveness of the Ul, it probably 
should be. 


Guidelines 
Screen resolution and dpi 
Support the minimum Windows effective resolution of 800x600 pixels. For critical Uls that must work in safe mode, support 


an effective resolution of 640x480 pixels. Be sure to account for the space used by the taskbar by reserving 48 vertical relative pixels 
for windows displayed with the taskbar. 


Optimize resizable window layouts for an effective resolution of 1024x768 pixels. Automatically resize these windows for lower 
screen resolutions in a way that is still functional. 


Be sure to test your windows in 96 dots per inch (dpi) (at 800x600 pixels), 120 dpi (at 1024x768 pixels), and 144 dpi (at 
1200x900 pixels) modes. Check for layout problems, such as clipping of controls, text, and windows, and stretching of icons and bitmaps. 


For programs with touch and mobile use scenarios, optimize for 120 dpi. High-dpi screens are currently prevalent on touch and 
mobile PCs. 


Window size 


Choose a default window size appropriate for its contents. Don't be afraid to use larger initial window sizes if you can use the 
space effectively. 


Use a balanced height to width aspect ratio. An aspect ratio between 3:5 and 5:3 is preferred, although an aspect ratio of 1:3 can 
be used for message dialog boxes (Such as errors and warnings). 


Use resizable windows whenever practical to avoid scroll bars and truncated data. Windows with dynamic content, 
documents, images, lists, and trees benefit the most from resizable windows. 


For text documents, consider a maximum line length of 80 characters to make the text easy to read. (Characters include 
letters, punctuation, and spaces.) 


Fixed-sized windows: 
o Fixed-sized windows must be entirely visible and sized to fit within the work area. 


Resizable windows: 
o Resizable windows may be optimized for higher resolutions, but sized down as needed at display time to the actual screen resolution. 


ie) 


Progressively larger window sizes must show progressively more information. M ake sure that at least one window portion or 
control has resizable content. 


Keep the upper-left origin of the content fixed as the window is resized. Don't move the origin to balance the content as the 
window size changes. 


ie) 


o Set a maximum content size if the content can be too stretched too wide. If the content becomes unwieldy, don't resize the 
content area beyond its maximum width or change the content's origin as the window is resized larger. Instead, keep a maximum 
width and a fixed upper-left origin. 


o Set a minimum window size if there is a size below which the content is no longer usable. For resizable controls, set 
minimum resizable element sizes to their smallest functional sizes, such as minimum functional column widths in list views. Optional 
UI elements should be removed completely. 


Consider altering the presentation to make the content usable at smaller sizes. 


ie) 
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[5 Windows Media Player 


C= eiGiew o-) 2 


In this example, Windows M edia Player changes its format when the window becomes too small for the standard 
format. 


Control size 


- Make all interactive controls at least relative 16x16 pixels. Doing so works well for all input devices, including Windows Tablet 
and Touch Technology. 


- Size controls to avoid truncated data. Don't truncate data that must be read to perform a task. Size list view columns to avoid 
truncated data. 


- Size controls to eliminate unnecessary scrolling. M ake controls slightly larger if doing so eliminates a scrollbar. There should be 
few vertical scrollbars and no unnecessary horizontal scrollbars. 


Old Fashioned (system scheme) 

| Variations (system scheme) 
Windows Aero (extra large) (system scheme) 
Windows Aero (large) (system scheme 
Windows Aero (system scheme) 
Windows Animated (system scheme) 

| Windows Black (extra large) (system scheme) 
Windows Black (large) (system scheme) 
Windows Black (system scheme) 

| Windows Inverted (extra large) (system scheme) 
Windows Inverted (large) (system scheme) 

— Windows Inverted (system scheme) 

¥ Windows Standard (extra large) (system scheme) 

Windows Standard (large) (system scheme) 


In this example, the drop-down list is sized to eliminate the scrollbar. 


- Reduce the number of control sizes on a surface. Prefer using the standard recommended control sizes and when necessary, use a 
few consistently sized larger or smaller controls. Try to use a single width for list boxes and tree views, and no more than three 
widths for command buttons and drop-down lists. However, text box and combo box widths should suggest the length of their 
longest or expected input. 
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Available toolbar buttons: 


— | Read Mail 


a 


m 


In this example, one list box and command button size is used consistently. 


- For controls that are sized based on their text, include an additional 30 percent (up to 200 percent for shorter text) for any text 
that will be localized. This guideline assumes the layout is designed using English text. Note also that this guideline refers to 


localized text, not numbers. 


- Extend static text controls, check boxes, and radio buttons to the maximum width that will fit in the layout. Doing so 


<- Remove 


Separator 


W 


if 


avoids truncation from variable length text and localization. 


Incorrect: 


-  — 


r 
= 2 Minutes and 45 Seconds remaining 


Copying 9 items (414 KB) 


From: images (C:\Users\jonathan\Documents\in 
To: images (\\server\users\jonathan\documer 
Time remaining: About 2 Minutes and 45 Seconds 

Items remaining: 6 (271 KB) 
Speed: 2.31 KB/sec 


In this example, control text is unnecessarily truncated. 


Control spacing 


- If controls aren't touching, have at least 3 DLUs (5 relative pixels) of space between them. Otherwise, users may click on inactive 
space between the controls. Since clicking inactive space has no result or visual feedback, users are often uncertain what went wrong. 


Placement 


- Arrange the UI elements within a surface to flow naturally in a left-to-right, top-to-bottom order (in Western cultures). 
The placement of the UI elements conveys their relationship and should mirror the steps to perform the task. 


- Place Ul elements that initiate a task in the upper-left corner or upper-center. Give the UI element that users should look at first 
the greatest visual emphasis. 


- Place Ul elements that complete a task in the lower-right corner. 


- Place related UI elements together, and separate unrelated elements. 


- Place required steps in the main flow. 
- Place optional steps outside the main flow, possibly de-emphasized by using a suitable background or progressive disclosure. 


- Place frequently used elements before infrequently used elements in the scan path. 


Focus 


- Choose a single UI element that users need to look at first to be the focal point. The focal point should be something important 


that users need to find and understand quickly. 


- Place the focal point in the upper-left corner or upper-center. 


- Give the focal point the greatest visual emphasis, such as prominent text, default selection, or initial input focus. 


Alignment 


- Normally, use left alignment. 
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« Use right alignment for numeric data, especially columns of numeric data. 

« Use right alignment for commit buttons, as well as controls aligned with right window edge. 

« Use center alignment when either left or right alignment is inappropriate or appears unbalanced. 

« When vertically aligning controls with text, align the text baselines to give a smooth horizontal reading flow. 
- For label alignment, refer to the Label alignment section in Design concepts. 


Accessibility 


- Don't use layout as the only means to convey important information about a UI. Users who have visual impairments may not be 
able to interpret this presentation. For example, make sure that controls labels communicate their relationship to other items. 


- Don't embed subordinate controls within control labels to create a sentence or phrase. Such associations are based purely on 
layout and aren't handled well by keyboard navigation or accessibility assistive technologies. Furthermore, this technique 
isn't localizable because sentence structure varies with language. 
Incorrect: 


[¥] Create a computer account in the domain 


In this example, the text box is incorrectly placed within the check box label. 


Correct: 


[¥] Create a computer account in the following domain: 


Here, the text box is placed after the check box label. 


- Make grouping accessible. Groups defined by window panes, group boxes, separators, text labels, and aggregators are 
automatically handled by accessibility aids. However, groups defined only by placement and backgrounds are not, and must be 


defined programmatically for accessibility. 
For more guidelines, see Accessibility. 


Recommended sizing and spacing 


Control sizing 


The following table lists the recommended sizes (width x height, or height if a single number) for common UI 
elements (for 9 pt. Segoe UI at 96 dpi). The widths based on the longest item in English add 30 percent for 


localization (up to 200 percent for shorter text) for any text (but not numbers) that wi 


Dialog units 


| be localized. 


Relative pixels 


Control 
V1 Clock Check boxes 
Volume 


10 


17 


Combo boxes 


fa 


width of longest item + 
30% x 14 


width of longest item + 
30% x 23 


> Browse the Internet 


uae buttons 


Command links 


> Set up a connection 


50 x14 


lines) 


width of longest valid data 


+30% x 14 


25 (one line) or 35 (two 


75 x23 


41 (one line) or 58 (two 
lines) 


width of longest item + 


30% x 23 


width of longest item + 
30% x an integral number 
of items (3 items 
minimum) 


columns widths that avoid 


truncated data x an 
integral number of items 


[[Highest@2bit).~] Drop-down lists 
Left List boxes 
Center 
Right 
Name. | Date taken List views 
= Autumn Leaves 
m Creek 
im | Desert Landscape 

a) Progress bars 
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| @ Display as a link Radio buttons 


© Display as a menu 


Sliders 15 24 


[Selecttimezone [Selecttimezone zone: [Text (static) (static) 8 13 
Text — width of longest or width of longest valid 


4 BW Desktop 
> a Jonathan 
> )) Public 
41 Computer 

> €@ Local Disk (C:) 


Spacing 


expected input +30% x 14 
(one line) +10 for each 
additional line 


Tree views width of longest item + 
30% x an integral number 
of items (5 items 
minimum) 


data + 30% x 23 relative 
pixels (one line) +16 for 
each additional line 


The following table lists the recommended spacing between common UI elements (for 9 pt. Segoe UI at 96 dpi). 


Element Dialog units Relative pixels 

Dialog box margins 7 on all sides 11 on all sides 

Between text labels and their /3 5 

associated controls (for 

example, text boxes and list 

boxes) 

Between related controls 4 7 

Between unrelated controls |7 11 

[eit a fone as laa wea peat. Ilaetas ee eine 

First control in a group box 11 down from the top {16 down from the top 
of the group box; align jof the group box; align 
vertically to the group _| vertically to the group 
box title box title 

Between controlsinagroup /|4 7 

box 

Between horizontally or 4 7 

vertically arranged buttons 

Last control in a group box 7 above the bottom of |11 above the bottom 
the group box of the group box 

From the left edge of a group /|6 9 

box 

Text label beside a control 3downfromthetop {5 down from the top 
of the control of the control 

Between paragraphs of text [7 11 


Smallest space between 3 or no space 


interactive controls 
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Smallest space between a 
non-interactive control and 
any other control 


a 


pt 
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Layout Metrics 
Layout 
Device independent layout 


A layout is device independent when it appears as intended, regardless of the font typeface or size, dpi (dots per 
inch), display, or graphic adaptor. To understand the problem, let's first consider what would happen if a dialog 
box layout is based on physical pixels. The following dialog box layout looks as the designer intended when using 
9 pt. Segoe UI at 96 dpi. 


Problem Reports and Solutions 


Windows uses problem reports to check 
for solutions 


If you clear the problem history, you might not be 
notified if solutions to those problems become 
available. 


A dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 96 dpi. 


However, without scaling this dialog box would become small and the text difficult to read when displayed at 120 
dpi: 


Problem Reports and Solutions 


Windows uses problem reports to check 
for solutions 
Hf you clear the problem history, you might not be 


notified if solutions to those problems become 
available. 


Clear at} (_Cancet_] 


The same dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 120 dpi. 


And it becomes completely unreadable without scaling when printed on a 600 dpi printer. 


The same dialog box with a physical pixel-based layout using 9 pt. Segoe UI at 600 dpi. 


And finally, the text no longer fits within the controls when displayed in M eiryo: 
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FAIBOLM— bh eeRR 


A FABOLM—haeHUC, BRRERZLET. 


ABOBECHEIS¢. CNSORACHI SER 
ROA CSSD ESD MBM CIVIL REDS 
#T. 


TATAE 


The same dialog box with a pixel-based layout using 9 pt. Meiryo. 


From these examples, we can see that device independent layout requires legible text regardless of the other 
display parameters, so the dialog box layout and sizing needs to stay proportional to its text. Microsoft® 
Windows ®traditionally achieves these goals by using dialog units. 


Dialog units 


A dialog unit (DLU) is a device-independent metric where one horizontal dialog unit equals one-fourth of the 
average character width for the current font and one vertical dialog unit equals one-eighth of the character 
height for the current font. Because characters are roughly twice as high as they are wide, a horizontal DLU is 
roughly the same size as a vertical DLU, but it's important to realize that DLUs are not a square unit. 


A dialog unit is one-fourth of the average character width and one-eighth of the character height for the current 
font. 


DLUs are used for sizing and placement in Win32 resource files. Each dialog box template in a resource file 
defines its font, so that font is used to determine DLUs. Consequently, using multiple fonts in a single program 
isn't a problem. 


Relative pixels 


As previously demonstrated, physical pixels aren't a device-independent metric, but they benefit from being easy 
to understand and use. For device independence, newer UI technologies use relative pixels. 


A relative pixel is a device-independent metric that is the same as a physical pixel at 96 dpi, but proportionately 
scaled in other dpis. So, for example, a relative pixel in 120 dpi is equal to 1.25 physical pixels. Of course, relative 
pixels are a square unit. 


Relative pixels are used for sizing and layout of dialog boxes in Windows Presentation Foundation (WPF) and 
WinForms. 


Effective resolution 


While historically most Windows-based computers have used 96 dpi by default, today many laptops are using 


120 dpi or higher by default. Using a higher dpi causes Windows to use higher fidelity UI elements, such as larger 
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fonts, icons, and graphics, which take more physical pixels to draw. The result is to lower the effective resolution 
of a display because more pixels are required to render the UI. 


To account for different dpis, screen resolutions are expressed in terms of effective resolution, which is the 
resolution at 96 dpi and is scaled for other dpis. The table below shows the physical resolutions for common dpi 
settings for the minimum Windows effective resolution of 800x600 pixels and the recommended Windows 
effective resolution of 1024x768 pixels. 


dpi Minimum physical resolution (in Recommended minimum physical resolution (in 
pixels) pixels) 
[96 dpi (100%) [800x600 |1024x768 


120 dpi (125%) |1024x768 1280x960 
144 dpi (150%) |1200x900 1600x1200 
192 dpi (200%) |1600x1200 2500x1600 


Consequently, stating that the minimum Windows effective resolution is 800x600 pixels means that minimum 
physical resolution required to support Windows at 120 dpi is 1024x768 pixels. Generally, the effective resolution 
can be calculated using the following equation: 


Effective resolution =Physical resolution x (96 / current dpi setting) 


Use effective resolution to refer to screen sizes, but relative pixels to refer to layout sizing and spacing. For 
example, you could say that the largest window size that will fit in the screen at the minimum Windows effective 
resolution is 800x600 relative pixelsd€” which is true regardless of the dpi. 


350 relative pixels 350 relative pixels 


285 relative pixels 
1024x768 physical pixels 1024x768 physical pixels 
1024x768 effective resolution 800x600 effective resolution 
96 dpi 120 dpi 


Use effective resolution to refer to screen sizes, relative pixels to refer to windows and controls. 


Developers: For more information, check Writing High-DPI Win32 Applications. 


Converting from DLUs to relative pixels and back 


You may need to convert layouts and sizes from DLUs to relative pixels and vice versa. However, because DLUs 
aren't a square unit, the conversion depends upon the axis. Furthermore, because DLUs are based on the font 
used, the conversion is also font dependent. 
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Conversion for 9 pt. Segoe UI 
1 horizontal DLU =1.75 relative pixels 
1 vertical DLU =1.875 relative pixels 


Dialog units |Pixels horizontal _| Pixels vertical 


2 (es) fear 
B62) (eens) 
a a (Ac 
5 fem (pea) 
6° fodosy —‘finanzsy 
7 fisaaasy__fisaaasy 
oe 


[2 (1.75) [2 (1.875) 


WO} CO); NS} BD) | BB} WW] NI 


be 
oO 


17 (17.5) 19 (18.75) 


[16 (15.75) [17 (16.875) 


el P| el] P| P|] PP] PP] Pe 
col NS} oD] WH] B} WwW] N] 


po Re) 
na —*(escan7s) __—fawaa7sy 
Ta —iewaas) ——ie 625) 
aS _[ee(ae25) _—(ecaea5) 
en eee 
a7 [sows7s) __—(sa@ne7sy 
ne ‘avery —*iaaeasy) 


[19 (19.25) [21 (20.625) 


N) Fe 
oO} © 


35 37 (37.5) 


[33 (33.25) [36 (35.625) 


Conversion for 8 pt. Tahoma 
1 horizontal DLU =1.50 relative pixels 
1 vertical DLU =1.625 relative pixels 


Dialog units | Pixels horizontal 


Pixels vertical 


[2 2 (1.5) 


2 (1.625) 


303.25) 
[5 (4.875) 
[6(6.5) 
[8 (8.125) 
[10 (9.75) 
[11 (11.375) 


13 


15 (14.625) 


16 (16.25) 


Ee pens 5) 


» 
a 


18 (17.875) 


199.5) 
[21 (21.125) 
[23 (22.75) 
[24 (24.375) 


26 


28 (27.625) 
29 (29.25) 


ic . (28.5) 


30 (30.875) 
32 (32.5) 


The numbers in parentheses are the exact conversions. Note that unlike other contexts, .5 is rounded down to 0 
instead of up to 1. 


Measuring controls and text 


If you are measuring control sizing and spacing using a graphics program, you might become confused because 
the numbers might not be what you expect. For example, the standard command button size is 75 x 23 pixels, but 
when measured it is only 73 x 21 pixels. The discrepancy is that some controls have a one pixel invisible border, 
which allows the controls to be placed right next to each when laid out using DLUs. Be sure to remember invisible 
borders when measuring control sizing and spacing. 


Actual control size: 


: | 
[ox (Gancet..| | 14 DLUs (23 pixels) 
x 


Visible size: 


50 DLUs (75 pixels) 


aa 
‘4 DLUs (6 pixels) 


49 DLUs (73 pixels) 


=a at 13DLUs (21 pixels) 


+ ie 
' "5 DLUs (8 pixels) 
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The visible size is smaller than the 
control size because there is a 
transparent 1 pixel border around the 
outside of the control. 
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Some controls have an invisible border. 


There is a similar problem when measuring text sizing and spacing with a graphics program. The height of a text 
control includes the height of the text including its ascenders, descenders, and diacritical marks, plus its spacing 
(called leading). Thus, the visible sizing and spacing of text may differ from its actual sizing and spacing. 


topbearing line 
diacritical mark 
ee —— line 


s ascender slash 
mean line 
cap height 
x-height 
baseline 


descender 
descender line 
bottom bearing line 


Font ascenders, descenders, diacritical marks, and leading. 


= Spacing between label and control 


Warning: Text sizes are larger than they appear. 
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Fonts 


Design concepts 
Usage patterns 
Guidelines 
Fonts and colors 
Attributes 


Users interact with text more than with any other element in Microsoft ®W indows® Segoe UI (pronounced "SEE- 
go") is the Windows system font. The standard font size has been increased to 9 point. 


abcdefghijklmnopaqrstuvwxyz 
ABCDEFGHUKLMNOPQRSTUVWXYZ 


The Segoe UI font. 


Segoe UI and Segoe are not the same font. Segoe UI is the Windows font intended for user interface text strings. 
Segoe is a branding font used by Microsoft and partners to produce material for print and advertising. 


Segoe UI is an approachable, open, and friendly typeface, and as a result has better readability than Tahoma, 
Microsoft Sans Serif, and Arial. It has the characteristics of a humanist sans serif: the varying widths of its capitals 
(narrow E and S, for instance, compared with Helvetica, where the widths are more alike, fairly wide); the stress 
and letterforms of its lowercase; and its true italic (rather than an "oblique" or slanted roman, like many 
industrial-looking sans serifs). The typeface is meant to give the same visual effect on screen and in print. It was 
designed to be a humanist sans serif with no strong character or distracting quirkiness. 


Segoe UI is optimized for ClearType, which is on by default in Windows. With ClearType enabled, Segoe UI is an 
elegant, readable font. Without ClearType enabled, Segoe UI is only marginally acceptable. This factor 
determines when you should use Segoe UI. 


Segoe UI includes Latin, Greek, Cyrillic, and Arabic characters. There are new fonts, also optimized for ClearType, 
created for other character sets and uses. These include M eiryo for Japanese, M algun Gothic for Korean, 
Microsoft J hengHei for Chinese (Traditional), Microsoft YaHei for Chinese (Simplified), Gisha for Hebrew, and 
Leelawadee for Thai, and the ClearType Collection fonts designed for document use. 


Meiryo includes Latin characters based on Verdana. Malgun Gothic, Microsoft J hengHei, and Microsoft YaHei use 
a customized Segoe UI. Use of italic versions of these fonts is not recommended. Malgun Gothic, Microsoft 
JhengHei, and Microsoft YaHei are supplied in regular and bold styles only, meaning italic characters are 
synthesized by slanting the upright styles. Although M eiryo includes true italic and bold italics, these styles only 
apply to the Latin characters—the Japanese characters remain upright when italic styling is applied. 


A variation of M eiryo, called M eiryo UI, is preferred in the ribbon command user interface. 


To support locales using these character sets, Segoe UI is replaced with the correct fonts depending on each 
locale during the localization process. 


To license Segoe UI and other Microsoft fonts for distribution with a Windows-based program, contact Ascender. 


Note: Guidelines related to style and tone and user interface text are presented in separate articles. 


Design concepts 


Fonts, typefaces, point sizes, and attributes 
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In traditional typography, a font describes a combination of a typeface, a point size, and attributes. A typeface is 
the look of the font. Segoe UI, Tahoma, Verdana, and Arial are all typefaces. Point size refers to the size of the 
font, measured from the top of the ascenders to the bottom of the descenders, minus the internal spacing (called 
leading). A point is roughly 1/72 inch. Finally, a font can have attributes of bold or italic. 


Informally, people often use font in place of typeface—as done in this article—but technically, Segoe Ul is a 
typeface, not a font. Each combination of attributes is a unique font (for example, 9 point Segoe UI regular, 10 
point Segoe UI bold, and so on). 

Serif and sans serif 


Typefaces are either serif or sans serif. Serif refers to small turns that often finish the strokes of letters in a font. A 
sans serif typeface doesn't have serifs. 


Readers generally prefer serif fonts used as body text within a document. The serifs provide a feeling of formality 
and elegance to a document. For UI text, the need for a clean appearance and the lower resolution of computer 
monitors makes sans serif typefaces the better choice. 

Contrast 

Text is easiest to read when there is a large difference between the luminance of the text and the background. 
Black text on a white background gives the highest contrast—dark text on a very light background can provide 
high contrast as well. This combination is best for primary UI surfaces. 

Light text on a dark background offers good contrast, but not as good as dark text on a light background. This 
combination works well for secondary UI surfaces, such as Explorer task panes, that you want to de-emphasize 
relative to the primary UI surfaces. 

If you want to make sure users read your text, use dark text on a light background. 

Affordances 


Text can use the following affordances to indicate how it is used: 


Pointer. The I-bar ("text select") pointer indicates that the text is selectable, whereas the left-pointing arrow ("normal select") 
pointer indicates that text isn't. 


Caret. When text has input focus, the caret is the flashing vertical bar that indicates the insertion/selection point in selectable 
or editable text. 


Box. A box around text that indicates that it's editable. To reduce the weight of the presentation, the box may be displayed 
dynamically only when the editable text is selected. 


Foreground color. Light gray indicates that text is disabled. Non-gray colors, especially blue and purple, indicate that text is a link. 


Background color. A light gray background weakly suggests that text is read-only, but in practice read-only text can have any 
color background. 


These affordances are combined for the following meanings: 


- Editable. Text displayed in a box, with a text select pointer, a caret (on input focus), and usually on a white background. 
- Read-only, selectable. Text with a select pointer and a caret (on input focus). 

- Read-only, non-selectable. Text with an arrow pointer. 

- Disabled. Light gray text with an arrow pointer, sometimes on a gray background. 


Read-only text traditionally has a gray background, but a gray background isn't necessary. In fact, a gray 
background can be undesirable, especially for large blocks of text, because it suggests that the text is disabled 
and discourages reading. 


Accessibility and the system font, sizes, and colors 


The guidelines for making text accessible to users with disabilities or impairments can be boiled down to one 
simple rule: Respect the user's settings by always using the system font, sizes, and colors. 
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If you do only one thing... 
Respect the user's settings by always using the system font, sizes, and colors. 


Developers: From code, you can determine the system font properties (including its size) using the 
GetThemeFont API function. You can determine the system colors using the GetThemeSysColor API function. 


Because you can't make any assumptions about users' system theme settings, you should: 


- Always base your font colors and backgrounds off system theme colors. Never make your own colors based on fixed RGB (red, green, 
blue) values. 


- Always match system text colors with their corresponding background colors. For example, if you choose COLOR_STATICTEXT for the 
text color, you must also choose COLOR_STATIC for the background color. 


- Always create new fonts based on proportional-sized variations of the system font. Given the system font metrics, you can create bold, 
italic, larger, and smaller variations. 


A simple way to ensure that your program respects users' settings is to test using a different font size and a 
high contrast color scheme. All text should resize and display correctly in the chosen color scheme. 


Usage patterns 


Text has several usage patterns: 


Title bar text 

Text on the title bar Title bar text 
that identifies the 

window. 


Main instructions 
Text that explains what 
to do on a page, 
window, or dialog box. 


Main instructions 


Secondary instructions ; . 
Supplemental text that | 2*cOndary instructions 
explains what to do on 

a page, window, or 

dialog box. 


Normal text 

Ordinary (read-only) 
text displayed in a user 
interface. 


Normal text 


Emphasized text 

Bold text is used to 
make the text easier to 
parse and to draw 
attention to text users 
must read. Italic text is 
used to refer to text 
literally (instead of 
quotation marks) and 
to emphasize specific 
words. 


Editable text 

Text that users can edit 
is shown in a box. To 
reduce the weight of 
the presentation, the 
box may be displayed 
only when the editable 
text is selected. 


Emphasized text 


Editable text 
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Disabled text 

Text that doesn't apply 
to the current context, 
such as labels for 
disabled controls. 
Disabled text indicates 
that users (normally) 
shouldn't bother 
reading the text. 

Links 

Text used to navigate 
to another page, 
window, or Help topic, 
or initiate a command. 


Disabled text 


Link 


Links (Hover) 


Group header 
Text used to group 
items in a list view. 


Group header 


File name 
File name text (in 
Content view only). 


Document text 
Text used in documents 
(as opposed to UI text). 


Document text 


Document headings 
Text used as a heading 
within a document. 


Guidelines 


Fonts and colors 


File name (in content view) 


Document headings 


- The following fonts and colors are defaults for Windows Vista and Windows 7. 


Pattern 


Title bar text 


Main instructions 


Theme symbol 
CaptionFont 


M ainInstruction 


Font, Color 
9 pt. black (#000000) Segoe UI 


12 pt. blue (#003399) Segoe UI 


Links (Hover) 


Group header 
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Instructi 9 pt. black (#000000) Si Ul 
Secondary instructions pong ea pe eee yee 
veneer BodyText 9 pt. black (#000000) Segoe UI 
Eaunhasized text BodyText 9 pt. black (#000000) Segoe UI, bold or italic 
. BodyText 9 pt. black (#000000) Segoe UI, in a box 
Editable text 
riiib ie Disabled 9 pt. dark gray (#323232) Segoe Ul 
Link HyperLinkText |9 pt. blue (40066CC) Segoe UI 
Hot 9 pt. light blue (4#3399FF) Segoe UI 


11 pt. blue (#003399) Segoe UI 
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‘ ‘ : 11 pt. black (#000000) Segoe UI 
File name (in content view) 


Document text (none) 9 pt. black (#000000) Calibri 


Document headings (none) 17 pt. black (#000000) Calibri 


. Choose fonts and optimize window layouts based on the UI technology and the target version of Windows: 
UI technology Target Windows version |Fonts to use and optimize for 


Windows Presentation Foundation |All Use WPF theme parts. 
Win32 or WinForms Windows Vista or later Use the appropriate Segoe UI font. 


Extensible components or pre- To target Windows®xP and 

Windows Vista Windows 2000, use the 8 point MS 
Shell Dlg 2 pseudo font, which 
maps to Tahoma. 
To target earlier versions of 
Windows, use 8 point MS Shell Dig 
pseudo font, which maps to 
Tahoma on Windows 2000 and 
Windows XP, and to MS Sans Serif 
on Windows 95, Windows 98, 
Windows Millennium Edition, and 
Windows NT 4.0. 


Developers: 


o For elements that use fixed layout (such as Windows dialog templates and WinForms), hard code the appropriate font from the 
preceding table. 


o For elements that use dynamic layout (such as Windows Presentation Foundation), use the theme fonts. Use theme APIs like 


DrawThemeText to draw text based on the theme symbol. Be sure to have an alternative based on system metrics in case the 
theme service isn't running. 


For Segoe Ul, use a 9 point font size or larger. The Segoe UI font is optimized for these sizes, so avoid using smaller sizes. 


Always match system text colors with their corresponding background colors. For example, if you choose COLOR_STATICTEXT for the 
text color, you must also choose COLOR_STATIC for the background color. 


Always create new fonts based on proportional-sized variations of the system font. Given the system font metrics, you can 
create bold, italic, larger, and smaller variations. 


Display large blocks of read-only text (such as license terms) against a light background instead of a gray background. Gray backgrounds 
suggest that the text is disabled and discourages reading. 


Consider a maximum line length of 65 characters to make the text easy to read. (Characters include letters, punctuation, and spaces.) 


Attributes 


- Most UI text should be plain—without any attributes. Attributes may be used as follows: 


o Bold. Use in control labels to make the text easier to parse. Use sparingly to draw attention to text users must read. Using too 
much bold lessens its impact. 


o Italic. Use to refer to text literally instead of quotation marks. Use sparingly to emphasize specific words. Use for prompts in text 
boxes and editable drop-down lists. 


> Bold italic. Don't use. 
o Underline. Don't use except for links. Use italic instead for emphasis. 


Not all fonts support bold and italic, so they should never be crucial to understanding the text. 
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Color 


Design concepts 
Guidelines 
General 
Using theme and system colors 
Color meaning 
Using color in data 
Documentation 


Color is an important visual element of most user interfaces. Beyond pure aesthetics, color has associated 
meanings and elicits emotional responses. To prevent confusion in meaning, color must be used consistently. To 
obtain the desired emotional responses, color must be used appropriately. 


Color is often thought of in terms of a color space, where RGB (red, green, blue), HSL (hue, saturation, 
luminosity), and HSV (hue, saturation, value) are the most commonly used color spaces. 


Magenta 


Blue White 


Black Yellow 


Green 


The RGB color space can be visualized as a cube. 


While display technology uses RGB values and consequently developers often think of colors in terms of RGB, the 
RGB color space doesn't correspond to how people perceive color. For example, if you add red to dark cyan, the 
result isn't perceived as more red but as lighter cyan. 


Dark cyan (red 0, green 255, blue 255) 


add red to get... 


Light cyan (red 200, green 255, blue 255) 


In this example, adding red to dark cyan makes it lighter, not more red. The RGB color space doesn't correspond to 
how people perceive color. 


The HSL/HSV color spaces consist of three components: hue, saturation, and luminosity or value. These color 
spaces are often used instead of RGB because they better match how people perceive color. 


The HSL color space forms a double cone that is white on the top, black on the bottom, and neutral in the middle: 


- Hue: The basic color in the color wheel, ranging from 0 to 360 degrees where both 0 and 360 degrees are red. 
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The color wheel, where red is 0 degrees, yellow is 60 degrees, green is 120 degrees, cyan is 180 degrees, blue is 
240 degrees, and magenta is 300 degrees. 


- Saturation: How pure (vs. dull) the color is, ranging from 0 to 100, where 100 is fully saturated and 0 is gray. 


- Luminosity: How light the color is, ranging from 0 to 100, where 100 is as light as possible (white, regardless of the hue and 
saturation) and 0 is as dark as possible (black). 


Luminosity 0-100 


0-360 


Saturation 
0-100 


The HSL color space can be visualized as a double cone. 
The HSV color space is similar, except that its space forms a single cone: 


- Hue: The basic color in the color wheel, ranging from 0 to 360 degrees where both 0 and 360 degrees are red. 
- Saturation: How pure (vs. dull) the color is, ranging from 0 to 100, where 100 is fully saturated and 0 is gray. 


- Value: How bright the color is, ranging from 0 to 100, where 100 is as bright as possible (which is half luminosity in the HSL space) 
and 0 is as dark as possible (black). 
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Hue 0-360" 


Saturation 


Value 0-100 0-100 


The HSV color space can be visualized as a single cone. 


In both HSL and HSV spaces, if saturation is 0 then luminosity specifies a shade of gray. In Windows, the HSL and 
HSV spaces are usually remapped to a scale between 0 to 240 so that colors can be represented with a 32-bit 
value. 


Note: Guidelines related to fonts and accessibility are presented in separate articles. 


Design concepts 


Effective use of color can make your program's user interface (UI) more effective. Color can help users 
understand certain meanings at a glance. Color can also make your product appear more aesthetically pleasing 
and refined. 


Unfortunately, it's all too easy to use color ineffectively, especially if you are not trained in visual design. Poor use 
of color results in designs that look unprofessional, dated, confusing, or just plain ugly. A poor use of color can be 
worse than not using color at all. 


This section explains what you need to know to use color effectively. 
How color is used 
Color is typically used in UI to communicate: 


Meaning. The meaning of a message can be summarized through color. For example, color is often used to communicate status— 
where red is a problem or error, yellow is caution or warning, and green is good. 


State. An object's state can be indicated through color. For example, Windows®uses color to indicate selection and hover states. 
Links within Web pages use blue for unvisited and purple for visited. 


Differentiation. People assume that there is a relationship between items of the same color, so color coding is an effective way 
to differentiate between objects. For example, in a control panel item, task panes use a green background to visually separate 
them from the main content. Also, Microsoft ®Outlook®allows users to assign different colored flags to messages. 

Emphasis. Color can be used to draw users' attention. For example, Windows uses blue main instructions to help them stand out 
from the other text. 


Of course, color is often used in graphics for purely aesthetic reasons. While aesthetics are important, you should 
choose the colors of UI elements primarily based on what they mean, not how they look. 


Color interpretation 


Users' interpretation of color is often culturally dependent. For example, in the United States, wedding attire for 
the bride is largely associated with the color white, while black is associated with funerals. However, long ago in 
Japan the color symbolism was just the opposite: white was the predominant color at funerals, and black was 
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considered a color that brings good luck for weddings. 


That said, the interpretation of red, yellow, and green for status is consistent globally. This is due to the 
UNESCO Vienna Convention on Road Signs and Signals, which defines the worldwide convention for traffic lights 
(where red means stop, green means proceed, and yellow means proceed with caution). You can use these status 
colors without concern for culturally dependent interpretations. 


Beyond the status colors, Microsoft ®Windows®assigns meanings to colors based on convention, as presented in 
the Guidelines section of this article. Be sure that your program's color usage is compatible with these color 
conventions. 


Color accessibility 


Use of color affects the accessibility of your software to the widest possible audience. Users with blindness or low 
vision may not be able to see the colors well, if at all. Approximately 8 percent of adult males have some form of 
color confusion (often incorrectly referred to as "color blindness"), of which red-green color confusion is the most 
common. 


The primary colors as seen with normal color vision. 


The primary colors as seen with Protanopia (1% of male population). 


The primary colors as seen with Deuteranopia (6% of male population). 
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The primary colors as seen with Tritanopia (1% of male population). 
For more information, see Can Color-Blind Users See Your Site? 


Use color to reinforce visually 


The best solution to the color interpretation and accessibility problems is to use color to visually reinforce the 
meaning of one of these primary methods of communication: 


- Text. Concise text is usually the most effective primary communication—either directly on the UI or through a tooltip. 


Fabrikam DVD - Burn failed 


In this example, tooltip text is used to communicate an icon's meaning. 


Design. Icons are easily distinguished by the designs, especially their outline shape. 


In this example, the standard icons are readily distinguishable based on their designs. 


Location. Relative location can also be used, but this approach is weaker than the alternatives. To be effective, the location 
should be standard and well known, as with traffic lights. 


While color is the most obvious attribute of many designs, it must always be redundant. 
Designing with color 


Ironically, the best way to design for color is to start by designing without color, using either wireframes or 
monochrome, and then add color later. Doing so helps ensure that information isn't being communicated using 
color alone. It also helps ensure that your printouts look great on monochrome printers. 


Use theme or system colors 


While there are many complex factors in using color effectively, in Windows UI choosing color often boils down 
to simply choosing the appropriate theme color or system color according to a few simple rules. Users can then 
select and customize these color schemes as they choose. 


By doing so, not only do you accommodate the color preferences of all your users, but you eliminate the burden 
of choosing the one perfect color scheme that works for all tastes, styles, and cultures (which, of course, is 
otherwise impossible). 


If you do only one thing... 
Choose colors by selecting the appropriate theme color or system color. Never use color as a primary method of 
communication, but as a secondary method to reinforce meaning visually. Design using wireframes or 
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monochrome to help ensure that color is secondary. 


Use theme or system colors correctly 


Assume that users choose theme or system colors based on their personal needs and that the theme or system 
colors are constructed appropriately. Based on this assumption, if you always choose theme or system colors 
based on their intended purpose and pair foregrounds with their associated backgrounds, the colors are 
guaranteed to be legible and respect users’ wishes in all video modes, including high-contrast mode. For 
example, the window text system color is guaranteed to be legible against the window background system color. 


Specifically, always: 


Choose colors based on their purpose. Don't choose colors based on their current appearance because that appearance can be 
changed by the user or future versions of Windows. 


Match foreground colors with their associated background colors. Foreground colors are guaranteed to be legible only against 
their associated background colors. Don't mix and match foreground colors with other background colors, or worse yet, other 
foreground colors. 


Don't mix color types. That is, always match theme colors with their associated theme colors, system colors with their associated 
system colors, and hardwired colors with other hardwired colors. For example, a theme text color isn't guaranteed to be legible 
against a hardwired background. 


If you must hardwire colors, handle high-contrast mode as a special case. 


If you do only one thing... 
Always choose theme or system colors based on their intended purpose, and pair foregrounds with their 
associated backgrounds. 


Using other colors 


While the Windows theme defines a comprehensive set of theme parts, you may find that your program needs 
colors that aren't defined in the theme file. While you could hardwire such colors, a better approach is to derive 
colors from the theme or system colors. Strategically using this approach gives you all the benefits of using theme 
and system colors, but with much more flexibility. 


For example, suppose you need a window background that is darker than the theme window background color. 
In the HSL color space, having a darker color means a color with a lower luminosity. Thus, you can derive a darker 
window background color using the following steps: 


1. Obtain the window background theme color RGB. 
2. Convert the RGB to its HSL value. 

3. Reduce the luminosity value (by, say, 20 percent). 
4. Convert back to RGB values. 


Using this approach, the derived color is guaranteed to be perceived as a darker shade of the original color 


(unless the original color was very dark to begin with.) 


White Blue 


Luminosity reduced 20% Luminosity reduced 20% 


In this example, a darker window background color is derived from the theme color. 
Testing colors 
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To determine if your program's use of color is accessible and not used as a primary method of communication, 
we recommend using the Fujitsu ColorDoctor or the Vischeck utilities to check for: 


- Overall dependency on color using the Gray scale filter. 
- Specific color confusion problems using the Protanopia, Deuteranopia, and Tritanopia filters. 


To determine if your program's use of color is programmed correctly, test your program in the following modes: 


- Theming enabled using the default Windows theme. 

- Theming enabled using a non-default theme. 

- Theming disabled ("Windows Classic style" in the Theme Settings in the Personalization Control Panel item). 
- High Contrast Black (white text on a black background). 

- High Contrast White (black text on a white background). 


All the screen elements should be legible and appear as expected, even immediately after mode changes. 
Guidelines 
General 
- Never use color as a primary method of communication, but as a secondary method to reinforce meaning visually. 
Using theme and system colors 


- Whenever possible, choose colors by selecting the appropriate theme color or system color. By doing so, you can always respect 
users’ color preference. 


- Choose theme and system colors based on their purpose. Don't choose colors based on their current appearance, as that 
appearance can be changed by the user or future versions of Windows. 


- Match foreground colors with their associated background colors. Foreground colors are guaranteed to be legible only against 
their associated background colors. Don't mix and match foreground colors with other background colors, or worse yet, other 
foreground colors. 


- Don't mix color types. That is, always match theme colors with their associated theme colors, system colors with their associated 
system colors, and hardwired colors with other hardwired colors. For example, a theme text color isn't guaranteed to be legible 
against a hardwired background. 


- If you must use a color that isn't a theme or system color: 
o Prefer to derive the color from a theme or system color over hardwiring its value. Use the process described earlier in 
this article, in Using other colors. 


o Handle high-contrast mode as a special case. 


- Handle theme changes. Theme changes are handled automatically by windows with standard window frames and common 
controls. Windows with custom window frames, custom or owner-draw controls, and other use of color must handle theme 
changes explicitly. 

o Developers: You can respond to theme change events by handling the WM_THEM ECHANGED message. 


Color meaning 


- While you should use theme and system colors (or derived colors) whenever you can, make sure any other use of color is 
compatible with the following use of color within Windows. 


|Hue [Meaning [Use in Windows 


blue/green Windows brand Background: Windows branding. 


glass, black, gray, white |neutral Background: standard window frames, 
Start menu, taskbar, Sidebar. 
Foreground: normal text. 
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blue start, commit Background: default command buttons, 
search, log on. 
Icons: information, Help. 
Foreground: main instructions, links. 


Background: status, stopped progress 


error, stop, vulnerable, critical, immediate 


red 


attention, restricted (progress bars). 
Icons: error, stop, close window, delete, 


required input, missing, unavailable. 


warning, caution, questionable Background: status, paused progress 


(progress bars). 
Icons: warning 


Background: status, normal progress 
(progress bars). 
Icons: go, done, refresh. 

Foreground: Paths and URLs (in search 
results). 


go, proceed, progress, safe 


purple visited Foreground: visited links (for links within 
Windows Internet Explorer ®and 


documents). 


- To avoid communicating the previous meanings, choose colors have high mid to low saturation and high or low luminosity. 
Users associate the previous meanings to colors that have full or high saturation and mid-level luminosity, so you can avoid these 
associations by choosing different shades. 


Luminosity-high Luminosity-mid Luminsity-low 


AA, 


In this example, there are three different shades of yellow, but only the highly saturated, mid-level luminosity 
shade communicates warning. The yellow folder icon doesn't feel like a warning. 


Using color in data 


- When helpful, assign color to data to help users differentiate it. Note that users will assume that data with similar colors have 
similar meanings. 


- Assign colors by default that are easy to distinguish. Generally, colors are easy to distinguish if they are far apart from each 
other in the HSL/HSV color spaces, while maintaining high contrast with their background: 
o When choosing colors, prefer triad harmonies or complementary hues, but not adjacent hues. 


In this example, if the first color assignment is red, the next color should be blue, green, or cyan, but not magenta, 
purple, orange, or yellow. 


o Colors have high contrast if there is a large difference in their hue, saturation, or luminosity. 
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In this example, the light blue base color contrasts with backgrounds with large differences in hue, saturation, or 
luminosity. 


o Using a white or very light background makes contrasting foreground colors easier to distinguish. 


Good contrast 


Good contrast 


In this example, white and light background colors make the foreground color easier to distinguish. 


- Allow users to customize these color assignments because color choice is subjective and a personal preference. If there are 
many coordinated colors, allow users to change them as a group using color schemes. 


- Allow users to label these color assignments. Doing so helps make them easier to identify and find. 
- Unlike UI colors, data should not change when the system colors change. 


Documentation 


- Refer to Ul elements by their names, not by their colors. Such references aren't accessible and the system colors may change. If 
a Ul element's name isn't well known or not descriptive enough, show a screenshot to clarify. 


Correct: 


Information Bar 


Did you notice the information bar? 


The information bar alerts you to security+elated conditions 
for example, if a potentially unsafe file or pop-up was just 
blocked). If a webpage does not display properly, look for the 
information bar at the top of the page and click it. 


|] Dont show this message again 


Leam about the information bar 


Incorrect: 
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Did you notice the gold bar? 


The gold bar alerts you to secunty+telated conditions 

for example, if a potentially unsafe file or pop-up was just 
blocked). If a webpage does not display properly, look for the 
gold bar at the top of the page and click it. 


[] Dont show this message again 


Leam about the bar 


In the incorrect example, the message refers to the Windows Internet Explorer information bar by its color instead 
of its name. 


© 2010, Microsoft Corporation. All rights reserved. Page 634 of 882 


Icons 


Design concepts 
Guidelines 
Perspective 
Light source 
Shadows 
Color and saturation 
Size requirements 
Level of detail 
Icon development 
Icons in the context of list views, toolbars, and tree views 


Icons are pictorial representations of objects, important not only for aesthetic reasons as part of the visual 
identity of a program, but also for utilitarian reasons as shorthand for conveying meaning that users perceive 
almost instantaneously. Windows Vista®introduces a new style of iconography that brings a higher level of detail 
and sophistication to Windows. 


Note: Guidelines related to standard icons are presented in a separate article. 


Design concepts 


Aero is the name for the user experience of Windows Vista, representing both the values embodied in the design 
of the aesthetics, as well as the vision behind the user interface (UI). Aero stands for: authentic, energetic, 
reflective, and open. Aero aims to establish a design that is both professional and beautiful. The Aero aesthetic 
creates a high quality and elegant experience that facilitates user productivity and even drives an emotional 
response. 


Windows Vista icons differ from Windows®xXP-style icons in the following ways: 


The style is more realistic than illustrative, but not quite photorealistic. Icons are symbolic images—they should look 
better than photorealistic! 


Icons have a maximum size of 256x256 pixels, making them suitable for high-dpi (dots per inch) displays. These high- 
resolution icons allow for high visual quality in list views with large icons. 


Wherever practical, fixed document icons are replaced by thumbnails of the content, making documents easier to 
identify and find. 


Toolbar icons have less detail and no perspective, to optimize for smaller sizes and visual distinctiveness. 


Well-designed icons: 


- Improve the visual communication of your program. 
- Strongly impact users' overall impression of your program's visual design, and appreciation for its fit-and-finish. 
- Improve usability by making programs, objects, and actions easier to identify, learn, and find. 


The following images depict what makes the Aero style of iconography in Windows Vista different from that used 
in Windows XP. 
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The Windows Vista icons (the lock and key on the left) are authentic, crisp, and detailed. They are rendered rather 
than drawn, but are not completely photorealistic. 


~ ° 


arr 


The Windows Vista icons (the two on the left) are professional and beautiful, with attention to details that 
improve icon production quality. 


These Windows Vista icons show optical balance and perceived accuracy in perspective and details. This allows 
them to look great big or small, up-close or from a distance. Moreover, this style of iconography works for high- 
resolution screens. 
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These examples show different types of icons, including a three-dimensional object in perspective, a front-facing 
(flat) icon, and a toolbar icon. 


Guidelines 
Perspective 


- Icons in Windows Vista are either three-dimensional and shown in perspective as solid objects, or two-dimensional 


objects shown straight-on. Use flat icons for files and for objects that are actually flat, like documents or pieces of 
paper. 


Typical 3D and flat icons. 


- Three-dimensional objects are represented in perspective as solid objects, seen from a low birds-eye view with two 
vanishing points. 


This example shows perspective and vanishing points typical of 3D icons. 


- In the smaller sizes, the same icon may change from perspective to straight-on. At the size of 16x16 pixels and 
smaller, render icons straight-on (front-facing). For larger icons, use perspective. 
o Exception: Toolbar icons are always front-facing, even in larger sizes. 
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This example shows how the same icon is treated differently, depending on size. 


Light source 


- The light source for objects within the perspective grid is above, slightly in front of, and slightly to the left of the 
object. 


- The light source casts shadows that are slightly to the rear and right of the object's base. 


- All light rays are parallel, and strike the object along the same angle (like the sun). The goal is to have a uniform 
lighting appearance across all icons and spotlight effects. Parallel light rays produce shadows that all have the same 
length and density, providing further unity across multiple icons. 


Shadows 


General 


- Use shadows to lift objects visually from the background, and to make 3D objects appear grounded, rather than 
awkwardly floating in space. 


- Use an opacity range of 30-50 percent for shadows. Sometimes a different level of shadow should be used, depending 
on the shape or color of an icon. 


- Feather or shorten the shadow if necessary, to keep it from being cropped by the icon box size. 
- Don't use shadows in icons at 24x24 or smaller sizes. 


MK 


Typical icon shadows. 


Flat icons 


- Flat icons are generally used for file icons and flat real-world objects, such as a document or a piece of paper. 
- Flat icon lighting comes from the upper-left at 130 degrees. 
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- Smaller icons (for example, 16x16 and 32x32) are simplified for readability. However, if they contain a reflection 
within the icon (often simplified), they may have a tight drop shadow. The drop shadow ranges in opacity from 30-50 
percent. 


. Layer effects can be used for flat icons, but should be compared with other flat icons. The shadows for objects will 
vary somewhat, according to what looks best and is most consistent within the size set and with the other icons in 
Windows Vista. On some occasions, it may even be necessary to modify the shadows. This will especially be true when 
objects are laid over others. 


- Asubtle range of colors may be used to achieve desired outcome. Shadows help objects sit in space. Color impacts 
the perceived weight of the shadow, and may distort the image if it is too heavy. 


Layer Style 


Blending Options: Default 
Drop Shadow 
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The Drop Shadow option in the Layer Style dialog box, and a typical shadow for a flat icon. 


Basic flat icon shadow ranges 


(Characteristic = [Range 
(Color Bb 
[Blendmode = Multiply 
[Opacity ——S«*|22-50 percent, dependingoncoloroftheitem 
Ande = «|120-130 (use globallight) 
[Distance =| 3 for 256x256, rangingdowntolfor 32x32 
Spread 


Three-dimensional icons 


- Create shadows for 3D icons on a case-by-case basis, with an effort to fit within a range of cast distance and feathering 
to fully transparent. Create the images in a size a bit smaller than the overall icon size demands to allow space for a 
drop shadow (for those sizes that will require one). Make sure the shadow doesn't end abruptly at the edge of the icon. 
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These examples help demonstrate variations created based on the shape and position of the object itself. The 
shadow sometimes needs to be feathered or shortened to keep it from being cropped by the icon box size. 


»* 


Color and saturation 


- Colors are generally less saturated than they were Windows XP. 
. Use gradients to create a more realistic looking image. 


- Although there is no specific color palette for standard icons, remember that they need to work well together in 
many contexts and themes. Prefer the standard set of colors; don't re-color standard icons, such as warning icons, 
because this disrupts users’ ability to interpret meaning. For more guidelines, see Color. 


- Icon files require 8-bit and 4-bit palette versions as well, to support the default setting in a remote desktop. These 
files can be created through a batch process, but they should be reviewed, as some will require retouching for better 
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readability. 


There is no strict color palette restriction. Only full-saturation (top right) is avoided. 


- Bit levels: ICO design for 32-bit (alpha included) +8-bit + 4-bit (dithered down automatically—pixel poke only most 
critical). Only a 32-bit copy of the 256x256 pixel image should be included, and only the 256x256 pixel image should be 
compressed to keep the file size down. Several icon tools offer compression for Windows Vista. 


- Bit levels: Toolbars 24-bit +alpha (1 bit mask), 8-bit and 4-bit. 
- Toolbars or AVI files: Use magenta (R255 GO B255) as the background transparency color. 


Size requirements 


General 


- Pay special attention to high visibility icons, such as main application icons, file icons that can appear in Windows 
Explorer, and icons appearing in the Start Menu or on the desktop. 


1°) 


For high dpi 


Application icons and Control Panel items: The full set includes 16x16, 32x32, 48x48, and 256x256 (code scales 
between 32 and 256). The .ico file format is required. For Classic M ode, the full set is 16x16, 24x24, 32x32, 
48x48 and 64x64. 


List item icon options: Use live thumbnails or file icons of the file type (for example, .doc); full set. 
Toolbar icons: 16x16, 24x24, 32x32. Note that toolbar icons are always flat, not 3D, even at the 32x32 size. 
Dialog and wizard icons: 32x32 and 48x48. 


Overlays: Core shell code (for example, a shortcut) 10x10 (for 16x16), 16x16 (for 32x32), 24x24 (for 48x48), 
128x128 (for 256x256). Note that some of these are slightly smaller but are close to this size, depending on 
shape and optical balance. 

Quick Launch area: Icons will scale down from 48x48 in Alt+Tab dynamic overlays, but for a more crisp version, 
add a 40x40 to .ico file. 


Balloon icons: 32x32 and 40x40. 


Additional sizes: These are useful to have on hand as resources to make other files (for example, annotations, 
toolbar strips, overlays, high dpi, and special cases): 128x128, 96x96, 64x64, 40x40, 24x24, 22x22, 14x14, 10x10, 
and 8x8. You can use .ico, .png, .omp, or other file formats, depending on code in that area. 
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- Windows Vista targets 96 dpi and 120 dpi. 


The following tables show examples of scaling ratios applied to two common icon sizes. Note that not all of these 
sizes must be included in the .ico file. The code will scale larger ones down. 


dpi Icon size Scale factor 
96 16x16 1.0 (100%) 


120 20x20 1.25 (125%) 
144 24x24 1.5 (150%) 


192 32x32 2.0 (200%) 


dpi Icon size Scale factor 
96 32x32 1.0 (100%) 


120 40x40 1.25 (125%) 


144 48x48 1.5 (150%) 
192 64x64 2.0 (200%) 


,ico file sizes (standard) 


Windows® Vista™ Icon size Famps 


256x256 48x48 32x32 24x24 16x16 14x14 10x10 8x8 


| 


128x128 96x96 64x64 


standard 
seres 


128x128 96x96 64x64 


.ico file sizes (special cases) 
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Windows" Vista™ Icon size ramps 


256x256 


128x128 96x96 64x64 


128x128 96x96 64x64 


special 
sizes 


Annotations and overlays 


- Annotations go in bottom-right corner of icon, and should fill 25 percent of icon area. 
o Exception: 16x16 icons take 10x10 annotations. 


- Don't use more than one annotation over an icon. 


- Overlays go in bottom-left corner of icon, and should fill 25 percent of icon area. 
o Exception: 16x16 icons take 10x10 overlays. 


Level of detail 


16x16 size of many of these icons is still widely used and therefore important. 
The details in an icon of this size must clearly show the key point of the icon. 


Asan icon gets smaller, transparency and some special details found in larger sizes should be sacrificed in order to 
simplify and get the point across. 


Attributes and colors should be exaggerated and used to emphasize the key forms. 


: 


al . 
ale 


Cell phone Portable j 
audio device | 


At 16x16, the icon for the portable audio device could easily be mistaken for a cell phone—so the ear piece is a key 
visual detail to show. 


Simply scaling down from the 256x256 size does not work. 


All sizes need relevant level of detail; the smaller the icon the more you need to exaggerate the defining details. 
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Good Level of Detail 


Poor Level of Detail 


a | 66 : 
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Icon development 


Designing and producing icons 


Hire an experienced graphic designer. For great graphics, images, and icons work with experts. Experience in 
illustrations using vector art or 3D programs is recommended. 


Plan to do series of iterations, from initial concept sketches, to in-context mock-ups, to final production review and fit- 
and-finish of icons in the working product. 


Think ahead—icon creation can be expensive. Gather all existing details and requirements, such as: the complete set 
of icons needed; the main function and meaning for each; families or clusters in the set you want to be apparent; brand 
requirements; the exact file names; image formats used in your code; and size requirements. Ensure up front that you 
can make the most of your time with the designer. 


Remember that the designer may not be familiar with your product, so provide functional information, screen shots, 
and spec sections, as appropriate. 


Plan for geopolitical and legal reviews as appropriate. 
Map out a timeframe and have regular communication. 


From concept sketch to end-product 


Create concept sketches. 

Try out the concept in different sizes. 
Render in 3D if necessary. 

Test sizes on different background colors. 
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Evaluate icons in the context of the real Ul. 


Produce final .ico file or other graphic resource formats. 


Tools 


Pencil and paper: Initial concept ideas, listed and sketched. 


3D Studio Max: Render 3D objects in perspective. 


Adobe Photoshop: Sketch and iterate, mock-up in context, and finalize details. 


Adobe Illustrator/ Macromedia Freehand: Sketch and iterate, finalize details. 


Gamani Gif M ovie Gear: Produce .ico file (with compression if needed). 


Axialis Icon Workshop: Produce .ico file (with compression if needed). 


Microsoft Visual Studio ®doesn't support Windows Vista icons (there is no support for aloha channel or more than 256 
colors). 


Production 
Step 1: Conceptualize 


Use established concepts where possible, to ensure consistency of meanings for the icon and its relevance to other 
uses. 


Consider how the icon will appear in the context of the UI, and how it might work as part of a set of icons. 


If revising an existing icon, consider whether complexity can be reduced. 


Consider the cultural impact of your graphics. Avoid using letters, words, hands, or faces in icons. Depict 
representations of people or users as generically as possible, if needed. 


If combining multiple objects into a single image in an icon, consider how the image will scale to smaller sizes. Use no 
more than three objects in an icon (two is preferred). For the 16x16 size, consider removing objects or simplifying the 
image to improve recognition. 


Do not use the Windows flag in icons. 


Step 2: Illustrate 


To illustrate Windows Aero style icons, use a vector tool such as Macromedia Freehand or Adobe Illustrator. Use the 
palette and style characteristics as outlined earlier in this article. 


Illustrate image using Freehand or Illustrator. Copy and paste the vector images into Adobe Photoshop. 


Make and use a template layer in Photoshop to make sure that work is done within square regions of the regulated 
sizes. 


Create the images in a size a bit smaller than the overall icon size demands to allow space for a drop shadow (for those 
sizes that require one). 


Place images at the bottom of the squares, so that all icons in a directory are positioned consistently. Avoid cutting off 
shadows. 


If you are adding another object to an image or a series, keep the main object in a fixed position, and place flat smaller 
sized images in a fixed position, such as the lower-left or upper-right depending on the case. 


Step 3: Create the 24-bit images 


Once you've pasted sizes in Photoshop, check the readability of images, especially at 16x16 and smaller sizes. Pixel- 
poking using percentages of colors may be required. Reduction of transparency may also be needed. It is common to 
exaggerate aspects at smaller sizes and to eliminate aspects as well, in order to focus on the key point. 


- The 8-bit icons will be displayed in any color mode lower than 32-bit and will not have the 8-bit alpha channel, so they 
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Step 4: 


Step 5: 


Step 6: 


may need to have their edges or more cleaned up because there's no anti-aliasing (edges may be jagged and image 
may be hard to read). 


In Photoshop, duplicate the 24-bit image layer and rename the layer to 4-bit images. Index 4-bit images to the 
Windows 16 color palette. 


Clean up images using only the colors from the 16 color palette. Outlines made from darker or lighter versions of the 
object's colors are usually preferable to grey or black. 


If working on a bitmap, be sure that the background color isn't used in the image itself, because that color that will be 
the transparent color. Magenta (R255 GO B255) is often used as the background transparency color. 


Create the 8-bit and 4-bit images 


Now that the 24-bit images are ready to be made into 32-bit icons, 8-bit versions need to be created. 


This is a great time to test contextual screen shots. It's amazing what can be discovered by viewing other icons or a 
family of icons in context. This step can save time and money. It is much better to catch issues before files go through 
production and are handed off. 


Add the drop shadow to your images in sizes that require them. 
Merge the drop shadow and the 24-bit images together. 
Create a new Photoshop file for each size. Copy and paste the appropriate image. Save each file as a .psd file. 


Do not merge the image layer with the background layer. It's helpful to include the size and color depth in the file name 
while working, but the file may ultimately need to be renamed. 


Create the .ico file 


Choose the application that best meets needs and skills of artists. Remember that icons to be used in a shipping 
product must be created in a tool that has been purchased or licensed. This means that trial versions cannot be used. 


Both of the products listed below have been used by designers who have produced icons for Windows Vista, and each 
offers the ability to export to Adobe Photoshop CS. 
o Gamani Gif Movie Gear: Produce .ico file 


o Axialis lcon Workshop: Produce .ico file 


Visual Studio doesn't support Windows Vista icons (there is no support for alpha channel or more than 256 colors), so 
its use is not recommended. 


Icon (.ico format) files must contain the 4- and 8-bit versions, as well as the 24-bit +alpha. 
Save files as a "Windows icon (.ico)" no matter which icon creation program you choose to use. 


Some iconographic assets may actually be bitmap strips, which also require an alpha channel (for example, for 
toolbars), or .png files saved with transparency. Not all are necessarily .ico format; check for what format is supported 
in code. 


Evaluate 


Look at all sizes. 
Look at the family together to evaluate family resemblance, optical balance, and distinction. 
Look at in context to evaluate relative weights and visibility (make sure that one doesn't dominate). 


Consider cases that may not be used now, but could be in the near future. Could this icon ever be annotated or have an 
overlay? 


Look at in code. 


Icons in the context of list views, toolbars, and tree views 


List views 
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- For Windows Vista, use thumbnails for files holding content that is visually distinct at small scale, such that users can 
directly recognize the file they are looking for. (Use the Windows Thumbnailing application programming interface for 
this.) 


GOelE « sonsthan > New Folder + | Search p 


Favorite Links Date modified Type 


B Oocuments 

EB Pictures 

B Musk 

B Recently Changed 


BB Searches Car maintenance 
2 Publec 


8 
wi We 


\ 


_“ 


Recipes Work 
“a 
Yardsale.doc Dste modified: 7/21/2006 10:25 AM ‘Sece 74.0 KB 
DOC File Authors: Flavius; Claudia Tithe Add a tithe 
Togs Finances Comments Add comments 


- Application icon overlays (not shown here) on thumbnails help association with the application for the file type, in 
addition to showing the file's preview. 


Note: For files without visually distinct content, don't use thumbnails. Instead, use traditional symbolic file icons 
showing object representation and the associated application or type. 


Toolbars 


- Icons that appear in a toolbar must have an optical balance in size, color, and complexity. 
- Test potential icons in a contextual screen shot to avoid any undesired dominance or imbalances. 
- Testing in screen shots easily helps avoid expensive iterations in code. 


- Review the icons in code as well. Motion and other factors can impact the success of an icon; in some cases further 
iterations may be needed. 
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Try iterations in context. 


Tree views 


- Optical balance is needed to preserve the hierarchy in a tree view control. 


- Therefore, icons that are typically used in this context should be evaluated there. Sometimes a particular 16x16 icon 
should be made smaller because its shape has an optical dominance over others. 


- Compensation for optical imbalances is an important part of producing top quality icons. 


Unbalanced Balanced 
41) Local Folders 4 WY) Local Folders 
4 (UF Inbox (23) 4 Bs Inbox (23) 
4\») General (12) a WY) General (12) 
>} New stuff > |) New Stuff 
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Standard Icons 


Design concepts 
Guidelines 
General 
Icon size 
Error icons 
Warning icons 
Information icons 
Question mark icons 


Standard icons are the error, warning, information, and question mark icons that are part of Windows® 


The standard error, warning, information, and question mark icons. 
The standard icons have these meanings: 


- Erroricon. The user interface (UI) is presenting an error or problem that has occurred. 

« Warning icon. The UI is presenting a condition that might cause a problem in the future. 
- Information icon. The Ul is presenting useful information. 

- Question mark icon. The UI indicates a Help entry point. 


The standard icons are notable because they are built into many Windows application programming interfaces 


(APIs), such as task dialogs, message boxes, balloons, and notifications. They are also commonly used on in- 
place messages and status bars. 


Note: Guidelines related to icons are presented in a separate article. 


Design concepts 


There are several factors in choosing the appropriate standard icon—which in part explains why they are so often 
used incorrectly. The most common mistakes are: 


- Using a warning icon for minor errors. Warnings are not "softened" errors. 
- Using a standard icon when it is better to use no icon at all. Not every message needs an icon. 


- Alarming users by giving warnings for minor issues or presenting routine questions as warnings. Doing so makes programs appear 
prone to hazard, and detracts from truly significant issues. 


The remainder of this section explains how to think about standard icons in order to avoid these common 
mistakes. 


Message type vs. severity 
Choose standard icons based the message type, not the severity of the underlying issue. The message types are: 


- Error. An error or problem that has occurred. 
« Warning. A condition that might cause a problem in the future. 
- Information. Useful information. 
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Consequently, an error message might take an error icon but never a warning icon. Don't use warning icons as a 
way to "soften" minor errors. So despite their difference in severity, "Incorrect font size" is an error, whereas 
"Continuing with this operation will set your house on fire" is a warning. 


Determining the appropriate message type 


Some issues can be presented as an error, warning, or information, depending on the emphasis and phrasing. For 
example, suppose a Web page cannot load an unsigned ActiveX control based on the current Windows®Internet 
Explorer ®configuration: 


- Error. "This page cannot load an unsigned ActiveX control." (Phrased as an existing problem.) 


- Warning. "This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned 
Activex controls." or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm 
your computer." (Both phrased as conditions that may cause future problems.) 


- Information. "You have configured Windows Internet Explorer to block unsigned ActiveX controls." (Phrased as a statement of fact.) 


To determine the appropriate message type, focus on the most important aspect of the issue that users need 
to know or act upon. Typically, if an issue blocks the user from proceeding, it is presented as an error; if the user 
can proceed, it's a warning. Craft the main instruction or other corresponding text based on that focus, and then 


choose an icon (standard or otherwise) that matches the text. The main instruction text and icons should always 
match. 


Severity 


While severity isn't a consideration when choosing among the error, warning, and information icons, severity is a 
factor in determining if a standard icon should be used at all. 


Icons work best when used to communicate visually. (Note that for accessibility reasons, this visual 
communication must always be redundant with another form, such as text or sound.) Users should be able to tell 
at a glance the nature of the information and the consequences of their response, so we must differentiate 
critical errors and warnings from their ordinary counterparts. Critical errors and warnings have these 
characteristics: 


- They involve potential loss of one or more of the following: 
o A valuable asset, such as data loss or financial loss. 


o System access or integrity. 
o Privacy or control over confidential information. 
o User's time (a significant amount, such as 30 seconds or more). 
- They have unexpected or unintended consequences. 
- They require correct handling now, because mistakes can't be easily fixed and may even be irreversible. 


To distinguish non-critical errors and warnings from critical ones, non-critical messages are usually displayed 
without an icon. Doing so draws attention to critical messages, makes critical and non-critical messages visually 
distinct, and is consistent with the Windows tone. 


Not every message needs an icon. Icons are not a way to decorate messages. 


The following is a good example of a critical warning because it meets the previously defined characteristics. 
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Formatting this volume will erase all data on it. Back up any data you 
want to keep before formatting. Do you want to continue? 


_Yes_ J [__Ne J 


In this example, a critical warning alerts users of potential irreversible data loss. 
However, the next example isn't critical because it is likely to be intentional and its results are easily undone. 
Incorrect: 

Internet Connection Wizard 


A Are you sure you want to exit the wizard? 


The new Internet account has not been created yet. 


ye) (te) 


In this example, this confirmation isn't critical because it's likely to be intentional and easily undone. 


In a typical UI, most errors relate to user input errors. Most user input errors aren't critical because they are 
easily corrected, and users must correct them before continuing. Also, drawing too much attention to minor user 
mistakes is contrary to the Windows tone. Consequently, minor user input errors are usually displayed without 
an error icon. To reinforce their non-critical nature, we refer to these as user input problems. 


Microsoft Office Word 


The number must be between 1 and 1683. 


(cece) 


In this example, this minor user input problem isn't critical, so it doesn't need an icon when presented in a dialog 
box. 


Avoid overwarning 


We overwarn in Windows programs. The typical Windows program has warning icons seemingly everywhere, 
warning about things that have little significance. In some programs, nearly every question is presented as a 
warning. Overwarning makes using a program feel like a hazardous activity, and it detracts from truly significant 
issues. 


The mere potential for data loss alone is insufficient to call for a warning icon. Additionally, any undesirable 
results should be unexpected or unintended and not easily corrected. Otherwise, just about any incorrectly 


answered question could be construed to result in data loss of some kind and merit a warning icon. 
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To focus warning icons on truly critical issues: 


- Make sure that the issue warrants heightened user attention. Routine confirmations and questions shouldn't have warning icons. 


- Are users likely to behave differently as a result of the warning icon? Are users likely to consider the decision more carefully? 
Incorrect: 


Speech Recognition Tutorial 


rn Do you want to end the tutorial? 


Completing the tutorial will improve the accuracy of 
Speech Recognition. 


Se Ge 


In this example, are users likely to answer this question differently because of the warning icon? 
- Isthere some significant action to do or decision to make? Warnings without actions just make users feel paranoid. 


Incorrect: 


A Windows Live Messenger is still running! * 
Windows Live Messenger will continue to run so that you 
can receive alerts and instant messages when you are 
signed in. 


Click here to not show this reminder again. 


Why is this notification a warning? What are users supposed to do (beside worry)? 
Context 


Context is also a consideration in using standard icons because the context itself communicates information. 
Specifically: 


- While dialog boxes (including task dialogs and message boxes) and notifications don't need icons for non-critical errors, in-place errors 
always need error icons. Otherwise, such non-modal feedback would be too easy to overlook. 


- In-place warnings always need warning icons to distinguish them from regular text. 


- Dialog boxes, notifications, and balloons don't need information icons because they are clearly presenting information. By contrast, 
banners need 16x16 pixel information or other icons because such non-modal feedback would be too easy to overlook. 


Because context is a significant factor in icon usage, the standard icon guidelines in this article are given in terms 
of their context. 


Evaluating standard icon appropriateness 


When evaluating your UI text, read any standard icons as well. Read error icons as "error!", warning icons as 
“warning, be very careful here!", and information icons as "attention!". Then continue to read the remaining 
context, such as the main instruction, content area, and commit buttons. Make sure the meaning and the tone of 
each standard icon matches the meaning and the tone of its context. If they don't, you've found a problem. 


If you do only one thing... 
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Make sure the meaning and the tone of each standard icon matches the meaning and the tone of its context. If 
they don't match, change or remove the icon. 


Guidelines 


Note: For the following guidelines, "in-place" means on any normal window surface, such as within the content 
area of a wizard, property sheet, or control panel item page. 


General 


- Choose standard icons based their message type, not the severity of the underlying issue: 
o Error. An error or problem that has occurred. 


o Warning. A condition that might cause a problem in the future. 
o Information. Useful information. 


- If an issue straddles different message types, focus on the most important aspect that users need to act on 
« Icons must always match the main instruction or other corresponding text. 


Correct: 


Digitizer Calibration Tool 


ry No suitable hardware was found to calibrate. 


The Digitizer Calibration Tool supports calibrating only integrated 


digitizers. 


[coco] 


Incorrect: 


A Windows System Error x 


There is an IP address conflict with another system on 
the network. 


In the incorrect example, the standard warning icon doesn't match the main instruction (which gives an error). 


Icon size 


- Choose the standard icon size based on the context: 


Context When to use 


Dialog boxes [Use 32x32 pixel for content area icons; 16x16 pixel for footnote area icons. 


In-place [Use 32x32 pixel for error pages; 16x16 pixel icons for all others. 
Notifications [Use 16x16 pixel icons. 


Balloons [Use 16x16 pixel icons. 
Banners [Use 16x16 pixel icons. 


Error icons 
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- Use error icons only when an error or a problem has occurred: 


Context When to use 


Dialog boxes |Use for critical errors only. (Don't use standard icons for non-critical errors.) 


(x) The disk containing the backup is not accessible. Please make sure it is 


M7 turned on and connected to the computer. 


(cove) 


Use for all errors. 


Sign in 


Please type your e-mail address in the 
format yourname@example.com. 


I es 
an Windows Live ID: 


(example5S55@hotmail.com) 


@ Please type your password. 


Password: 


Forgot your password? 


Notifications |Use for critical errors only. (For action failures.) 


© Windows could not activate * 
Click this message to find out more. 


Balloons Don't use. Balloons shouldn't be used for critical errors, and they don't need error icons for non-critical errors. 
Banners Don't use. Banners shouldn't be used for errors. 


Generally, error icons aren't needed for non-critical user input problems. However, icons are needed for in-place 
errors, because otherwise such contextual feedback would be too easy to overlook. 


- For task dialogs, don't use error footnote icons. Error icons must be presented in the content area only. 
Warning icons 


- Use warning icons only when a condition might cause a problem in the future: 


Context When to use 
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Dialog boxes |Use for all warnings. 


A If you change a file name extension, the file may become unusable. 


Are you sure you want to change it? 


Lives} ([__m 


Use to identify the text as a warning. 


@ Ona hard disk 


A There may not be enough free space on this disk to save a backup. Please delete files or 
format the disk, or select another disk. 


Notifications |Use for all warnings. (For non-critical system events.) 


x 


A Low battery 
You should change your battery or switch to 
outlet power immediately to keep from losing 
your work, 


Balloons Use for special conditions. 


~ 


A Caps Lock is on 
Having Caps Lock on may cause you to enter your password incorrectly. 


Press Caps Lock to turn it off before entering your password. 


Banners Use to draw attention to the banner. 


» ATPM was not found. A TPM is required to turn on BitLocker. If your computer has a TPM, then 
\ contact the computer manufacturer for BitLocker-compatible BIOS. 


- Don't use warning icons to "soften" non-critical errors. Errors aren't warnings—apply the error icon guidelines instead. 


- For question dialogs, use warning icons only for questions with significant consequences. Don't use warning icons for routine 
questions. 
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Correct: 


i Once started, System Restore may not be interrupted and cannot be 


undone until after it has completed. Are you sure you want to 
continue? 


[ves] Ne _) 


Incorrect: 


Microsoft Office Outlook 


Areyou sure you want to dismiss all these 
reminders? 


[| Don't show this message again 


Cove J[_m] 


In the incorrect example, a warning icon is incorrectly used for a routine question. 


- For task dialogs, you can use a warning footnote icon to alert users of risky consequences. However, use a warning icon either in the 
content area or the footnote area, but not both. 


File Download - Security Warning 
Do you want to run or this file? 
Name: Install_Messenger.exe 


Type: Application, 16.3MB 
From: download.microsoft.com 


[Fun] {__Save _] (_cencet_) 


While files from the Intemet can be useful, this file type can 


potentially harm your computer. If you do not trust the source, do not 
tun or save this software. What's the risk? 


In this example, a yellow security shield is used in a footnote. 
Information icons 


. Use information icons only when the context isn't obviously presenting information: 


Context When to use 
Dialog boxes |Don't use. 
In-place Don't use. Use either plain static text or a banner instead. 
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Notifications |Don't use. 
Balloons Don't use. 


Banners Use to draw attention to the banner. 


i) For your security, some settings are controlled by Group Policy 


Information icons aren't needed in dialog boxes, notifications, and balloons because their context sufficiently 
communicates that they are providing users with information. 


- For task dialogs, don't use information footnote icons. Footnotes are sufficiently visible and it goes without saying that they are 
information. 


Question mark icons 


- Use the question mark icon only for Help entry points. For more information, see the Help entry point guidelines. 


- Don't use the question mark icon to ask questions. Again, use the question mark icon only for Help entry points. There is no need 
to ask questions using the question mark icon anyway—‘it's sufficient to present a main instruction as a question. 


- Don't routinely replace question mark icons with warning icons. Replace a question mark icon with a warning icon only if the question 
has significant consequences. Otherwise, use no icon. 
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Animations and Transitions 


Strategic use of animations and transitions can make your program easier to understand, feel smoother, more 
natural, and of higher quality, and be more engaging. But the gratuitous use of animations and transitions can 
make your program distracting and even annoying. 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Effective communication 
Patterns 
Performance 
Animation characteristics 
Animated text 
Reducing power consumption 
Accessibility 
Documentation 


Animations give the appearance of motion or change over time. Use animation to give feedback, preview the 
effect of an action, show the relationship between objects, draw attention to change, or explain a task visually. 


Tele) Geis 
fais ie} [+ |iaalle 
Beis) Geis 


Microsoft ®Windows®uses a background flash animation to give feedback that the object was clicked. 


Transitions are animations used to keep users oriented during user interface (UI) state changes and object 
manipulations, and make those changes feel smooth instead of jarring. Good transitions feel natural, often giving 
the illusion that users are interacting with real-world objects. 


Windows Desktop Gadgets use smooth transitions between their concise and details states. 


Generally, the best animations and transitions are used to communicate to users non-verbally, and to make state 
changes more natural and less noticeable. By contrast, the least effective are gratuitous in that they don't 
communicate anything or draw unnecessary attention. Animations are best used as a secondary form of 
communication. They should communicate information that is useful but not critical, and to be accessible, users 
should be able to determine equivalent information through other means. 


Note: Guidelines related to software branding, sound, and accessibility are presented in separate articles. 


Is this the right user interface? 

To decide, consider the following questions. 
Animations 

Do the following conditions apply? 


+ The animation visually communicates something useful, such as giving feedback, showing relationships, causes and effects, or 
drawing attention to important change. 
« Seeing the animation isn't essential. Equivalent information can be obtained in another way. Users might not benefit from the 
animation if: 
o They have turned animations off. 
o Their attention is elsewhere. 


o They are visually impaired. 
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> The animation is obscured by another window. 
> The animation isn't played due to insufficient system performance. 


« The animation doesn't affect the user's productivity. Either: 
> Ithappens quickly (200 milliseconds or less). 


> It doesn't interfere with interaction or it can be interrupted. 
> The user has to wait anyway. 


« The animation doesn't affect the user's flow. 
> Itis either at the user's center of attention, or it draws attention to something outside the center of attention that is important or 
useful in completing a task. 


> Itis easily ignorable, not distracting or annoying. 
> It doesn't become tiresome. Users still find it appropriate and enjoyable even after repeated viewing. 


If so, consider using an animation. 
Transitions 


Is an object or scene changing state, and do all of the above conditions for using animations as well as any of the 
following conditions apply? 


« The state change is conceptually disorienting, confusing, or otherwise hard to understand. 


« The state change is visually jarring, lacks continuity or smoothness, or flashes; or appears unnatural, unpolished, or of poor 
quality, especially if it involves a large screen area. 


« Using a transition would make the state change appear faster. 
« The state change is worthy of special user attention. 


If so, consider using a transition. 
Design concepts 


Animations and transitions are an effective way to communicate information visually that would otherwise 
require text to explain or might be missed by users. 


Incorrect: 


Document Viewer 


[x] You have scrolled to the end of the document. 


Correct: 


end of the document 


Using an animation communicates the same information, but in a natural, unobtrusive way. Which would you 
rather see a thousand times? 


Animations and transitions don't have to demand attention to be successful. In fact, they are often used to 
avoid drawing attention to program mechanics that users don't need to be aware of. Many successful animations 
are so natural that users aren't even aware of themaé”rather users would only notice their absence. Frequency 
of occurrence increases the need for subtlety, so save effects that demand attention for infrequent events that 
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| ts Microsoft Office Outlook 2007 
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i Microsoft Expression Blend 3 


P23) Microsoft Office Word 2007 


eS Windows Live Messenger 
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a. Remote Desktop Connection 
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| 4 = Badkrograms 


A Start menu transition that avoids drawing attention. 


Beyond making your program easier to understand and feel smoother, well-designed animations and transitions 
are a great way to add personality, character, and style to your program. They can make the user experience 
more immersive and engaging by giving it a natural, real-world feel. 


Windows 7 highlights taskbar buttons on hover based on the current mouse position and program icon color. This 
approach is visually attractive, yet subtle, conveying a humble personality. 


However, animations and transitions are most effective and welcome when they serve a clear purpose. They 
should be used to improved usability, smoothness and flow, and the perception of qualityae”without harming 


performance significantly. 


While some types of animations are used to draw the user's attention, make sure that attention is well deserved 
and worthy of interrupting the user's train of thought. The human eye is sensitive to motion, especially peripheral 
motion. It can be difficult for users to concentrate when there is a flashing taskbar button or a spinning 
notification area icon. Avoid using animations to interrupt or distract users, or draw attention to things that 
don't warrant the user's attention. 


Incorrect: 


Programs shouldn't flash their taskbar button unless users must do something important immediately. In this 
case, the only thing the user needs to do is activate the program. 


Use animations and transitions because your program needs them, not merely because you can. And for 
accessibility, don't use animation as the only way to convey essential information. Make sure that users can 
obtain equivalent information in a different way. 


Attributes of good animations and transitions 
Good animations and transitions strike the right balance among these attributes: 


- Are clearly purposeful. Good animations are there because they need to be, whether to communicate information, make an 
interaction feel real, or draw attention to something noteworthy. And purposeful animations are accuratede” if an animation shows 
that a task is being done, it's because the task is in fact being done. 


Incorrect: 
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| Full charged (100%) 


Current power plan: Default 


ce 20:00AM 
“pe 12/29/2008 


In this example, the animation shows that a fully charged battery is being charged. 


- Look smooth and continuous. Good animations smoothly remove seams between scene or element state changes by 
showing relationships and providing a sense of place and context. Continuity helps users understand how they got where they are, 


and how to get back to where they came from. 


M. Sample Pictures 


Qe = 


£* Snipping Tool 


© Options 
Se Oo 


Select a snip type the menu e 
orci tne NE lie 


£ Snipping Tool 


Bnew + x} cancel Gp Options 


Select a snip type from the menu e 
or click the New button. 


The Windows 7 taskbar window preview morphs for continuity as the user moves from one program to another. 


- Are realistic. Good animations simulate an object's real-world physical properties and behavior. This helps users predict and 
understand the results of their interactions. You don't have to model the real world exactly, but if you use realistic animations, you 
must Keep them consistent with the real world. Users should never be surprised or confused by the results, especially with 


animations used for direct manipulation. 


—_ 


sal 


In this example, the "move out of the way" animation used by the Windows 7 taskbar feels more realistic than a 


static insertion point. 


- Are authentic. Even objects that aren't found in the real world can appear natural by being based on the real-world behavior of 
a different, but related, object. This metaphor only works if the relationship clearly communicates the intended purpose and behavior. 


Paces 
Selle 
Boia 
Ieee 
PII del 
== 
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In this example, the window "squeegee" animation used by Windows 7 feels authentic because it is consistent 
with how glass windows might behave in the real world. 


« Use natural mapping. Natural mappings are either physical or cultural. A culturally-based natural mapping, for example, might 
start from the fact that in Western cultures, people read from left to right. Consequently, to express a time sequence of objects, 
the middle object is current, objects to the left are from the past, and objects to the right are in the future. Going forward in time 
is indicated by left-to-right movement. 


Bob Acri 


In this example, the Windows M edia®Player control has a natural mapping because playing moves the position 
from left to right. 


- Have personality. Well-chosen animations are great ways to add personality, character, and style to your program. They can make 
the user experience more immersive and engaging. While the type of animation determines what it communicates, the specific way 
in which the animation is performed shows the program's personality. Good animations project the right personality for your 
program, whether serious or whimsical, or somewhere in between. 


In this example, Zune's use of animated text and dynamic perspective help shape its personality. 


Look and feel responsive. Good animations don't harm the user's productivity by blocking users from other interactions, or 
forcing users to watch. No matter how natural and engaging your program's animations are, nobody wants to wait for them 
exclusively. Good animations also look responsive without being jarring by having a fast start with a soft landing. Responsive 
animations also benefit from communicating their purpose quickly. Users shouldn't have to watch an animation for a long time just 
to figure out what it is doing or when it is done. For direct manipulation, responsive animations are essential to maintain a direct 
and engaging real-world feel. To feel direct, an object's contact points must stay under the pointer smoothly throughout 

the manipulation. Any lag, choppy response, or loss of contact destroys the perception of direct manipulation. 
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In this example, the touch panning transition feels responsive by keeping the contact point under the user's finger 
throughout the manipulation. 


Attract the right level of attention. Good animations are usually subtle and draw only the attention required to fulfill their purpose. As 
a result, they aren't distracting, annoying, overly complex, overly long, or repetitive. They don't become tiresome after 
repeated viewings. 


> Search Results in Local Disk (C:) > Sa | +4 || prog| 


7 Save search 3 7 ll @ 


)) Program Files (x86) 
[ProgramData 


’ Save search +3 ~ |Fil| @ 


}) Program Files (x86) 
ProgramData 


In this example, Windows search temporarily draws attention to matching search words, then fades down. 


Look special only if genuinely special. Frequency increases the necessity for subtlety, so common interactions need simple 
animations that communicate a simple idea in a simple way. Reserve special, complex animations for special, infrequent experiences. 


Starting Windows Starting Windows Starting Windows 


In this example, Windows uses an attention-getting animation at startup to make the experience feel special, but 
such an animation would be inappropriate elsewhere. 


You'll know that you have achieved the right balance when the overall experience would be harmed if any of 
these attributes were removed. 


Creating an animation vocabulary 


Good animations are about effective visual communication, and consistency is crucial to their effectiveness. If 
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you use a specific transition, such as pushing a scene in from the right to advance to the next scene, that should 
be the only transition used for that purpose and that transition shouldn't be used for any other purpose. 
Assigning different meanings to the same animation harms its ability to communicate. By assigning specific 
animations and transitions to specific meanings, you are creating an animation vocabulary. 


This issue applies to animations and transitions that have meaning, not to generic ones that users aren't likely to 
assign meaning to or those whose purpose is to be unnoticeable. For example, animations like fades and special 
effects like dissolves have no particular meaning, so they can be used freely. 


A good vocabulary assigns animations that model an object's real world, physical behavior. If you need to assign 
an animation to an object or action that doesn't have a real world counterpart, choose an animation that shows 
how the object might behave were it real. 


While the Start menu isn't a real world object, its hover effect lights up like a real-world object might when 
activated. 


Each animation in a vocabulary needs to be clearly distinct. The animations should have similar behaviors only if 
their associated actions are similarly related. For example, movement transitions suggest navigation, so you can 
use movement transitions from different directions to indicate different types of navigation. 


You'll know that your animations and transitions aren't communicating well when users find the results 
confusing, surprising, or unexpected. Generally, it's better to achieve a single purpose well than multiple 
purposes not so well. 


Ideally, your animation vocabulary should be comprehensive across all areas of your program that need them. If 
only a few interactions have natural animations, that will draw attention to those that don't. 


To learn more about the Windows animation vocabulary, see the Usage patterns section of this article. 
Designing the right personality 


While the type of animation determines what it communicates, the specific way in which the animation is 
performed speaks to the program's personality and reinforces its brand. 


Your program's personality should reflect the nature of its tasks and the personality of its users, so it's not an 
arbitrary choice. Rather, a well-designed personality should feel authenticd€”never try to force it. The personality 
should make an emotional connection to the user. Some factors to consider: 


- Tasks: Serious or fun; optional or required. 

- Consequences: Serious or minor. 

- Cost: Free or purchased; if purchased, moderately priced or expensive. 

. User focus: Relatively narrow group of target users, or wide, general audience. 
. User environment: Professional, casual, or home. 

. User age: Younger or older. 

. Usage frequency: Frequent or infrequent. 


The combination of these factors helps determine an appropriate personality for your program. Here are some 
suitable combinations for common types of programs: 


Productivity applications 


Naturally, productivity applications must focus on productivity. While a few special experiences can stand out, 
most other animations should have these characteristics: 


+ Small 
- Natural, realistic 
- Subtle, subdued 


- Fast, efficient 
- Relaxed 


Utilities 
Utilities are typically used briefly, so their use of animation can be more aggressive: 


« Realistic, illustrative, self-explanatory 
. Safe 
- Engaging 


Entertainment, games 
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Because the goal of these programs is to engage and delight users, the animations and transitions can be much 
more aggressive by having these characteristics: 


« Large (possibly becoming an integral part of the experience) 
. Artificial, surreal 

« Impactful, vibrant 

« Emotional, playful, whimsical 

« Energetic 


Making an emotional connection is so important for entertainment programs that it's acceptable to bend some 
rules if doing so helps make users fall in love with the program. For example, it's acceptable if an animation or 
transition becomes tiresome after the hundredth time if most users are unlikely to use the program that often. 


Generally, animations and transitions that are small, natural, subdued, efficient, yet relaxed are the safest bet. 
Transitions with these characteristics typically take the shortest path from beginning to end, start quickly, end 
softly, and don't overshoot. Also, well designed transitions are designed to work well across the entire range of 
distances in which they will be used. 


Animation performance 


When designing animations, make sure that they don't affect users’ ability to use your program efficiently. 
Generally, make your animations slow enough to fulfill their purpose, but fast enough that they don't interfere 
with responsiveness, demand too much attention, or become tiresome. 


Incorrect: 


While this page turning animation has an engaging, real-world feel, it lessens users’ productivity by taking longer 
to turn pages. 


Brief transitions (200 milliseconds or less) are a special case (especially when they often work off of a delay) 
because users will be aware that they have to wait a split second for them. Users are willing to wait for such 
animations if: 


« The perceived wait is extremely brief (200 milliseconds or less). 

« The transition makes the interaction feel more smooth and natural. 
- The transition makes the interaction feel more responsive. 

« Any delay helps keep the user in control of the interaction. 


Users will accept a brief delay for the taskbar button reordering animation because it is very brief and it makes 
the interaction feel more natural. 


There are three ways in which animations can adversely affect performance: speed, responsiveness, and 
perception. 


For speed, some animations are visual veneers over CPU-intensive tasks, so the last thing you should do is make 
these tasks slower with CPU-intensive animations. The most CPU-intensive animations ("heavy" animations) tend 
to: 


« Involve many elements moving independently. 
« Play for a long duration or distance. 
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- Involve a large amount of screen space. 
« Are mathematically intensive. 


Animations with less impact on performance: 


- Involve a single object. 

« Play fora short duration or distance. 

« Involve asmall amount of screen space. 
« Aren't mathematically intensive. 


To ensure good performance, heavy animations should be used only for tasks that aren't CPU intensive, whereas 
light animations can be used anywhere. 


For responsiveness, most animations and transitions should be designed so that users can interact while the 
animation is running. Unless an animation is part of a process, make it independent of the user's primary 
interaction and allow users to interrupt it. 


An animation might not adversely affect a task's performance in reality, yet users may have the perception that it 
does. For example, don't use an animation that appears heavy for a slow, CPU-intensive task even if it doesn't 
harm performance, because users might conclude that the animation is the reason the task is slow. If something 
looks slow, it will feel slow, so it's better to use animations that feel simple, lightweight, and fast. Using 
animations with snappy beginnings for CPU-intensive tasks helps. 


Risky: 


>) 9 Minutes remaining 


Copying 436 items (1.99 


from Local Disk (D:) to Local Disk (D:) 
About 9 Minutes remaining 


\Y More details 


While the animation in the Windows file copy dialog doesn't harm file copy performance, it runs the risk of having 
users think that it does. 


Also risky: 


GO- (imicormnerpmeeDOypomen re + |] x 


In this example, the sluggish looking progress animation in the Windows Explorer address bar makes some tasks 
look painfully slow. 


Animations and transitions have no value if their quality is so poor that they make the experience less smooth 
and less engaging. To maintain their quality, animations should be designed to degrade gracefully whenever 
sufficient system resources aren't available. Animations can degrade by having variations that require fewer 
resources (such as shorter lengths or lower frame rates), or even not running at all. Regardless of the resources 
available, make sure the animations have high quality and look like animations instead of software bugs. 


Finally, if users believe that your program's animations and transitions detract from their productivity, there's a 
good chance that some users will want to turn them off. To support this ability, respect the option to Turn off all 
unnecessary animations found in the Windows Ease of Access Center. 


Attracting the right level of attention 


While only some types of animations and transitions are specifically designed to attract the user's attention, they 
should be designed to attract the right level of attention to fulfill their purpose well. What are the different ways 
to attract attention, and how do you pick the right one? 


Animation effects 


Different animation effects attract different levels of attention. The following list summarizes the most common 
methods, starting with the most attention-getting: 


- Rapid flashing. Demands immediate attention. Can break users' concentration no matter where the flashing is occurring. 
- Moderate flashing. Same, but demands less attention with lower frequency. 
- Bouncing. Noticeable in peripheral vision, and relatively demanding in nature. Users are likely to notice, but can continue to 
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Motion. Noticeable in peripheral vision, but not demanding. However, complex or 3-D motions attract more attention than simple or 
2-D motions. Users are likely to notice, but can continue to concentrate elsewhere. 


Moderate pulsing. Noticeable but not distracting in peripheral vision. Users can continue to concentrate elsewhere. Can 
pulse brightness, colors, and sizes. 


Slow pulsing/ glowing. Noticeable but subtle. Attracts more attention than a static effect, but users might not notice the 
animation unless they are already looking. 


Fade. Even less noticeable. Attracts more attention than a static effect, but users might not notice the animation unless they are 
already looking. 


Static highlight/ gleam. Noticeable if users choose to look, but doesn't demand attention if it is elsewhere. 


Ambient/ natural. Purposefully not noticeable by having a natural, real-world appearance. 


To determine the right approach for your program or feature, consider how these factors relate to your feature's 
scenarios. 


For example, suppose you are designing an instant message program and someone just sent the user a message. 
This scenario requires the user's attention, it should be noticeable anywhere, and usually the user will want to 
respond quickly. This scenario suggests that a moderate flashing animation would be a good choice. By contrast, 
suppose you want to inform users that a print job has completed. Users should be able to continue to 
concentrate and work productively elsewhere, and it's acceptable if users don't notice. This scenario suggests 
that moderate to slow pulsing or glowing would be a good choice. 


Duration 


The appropriate duration for an attention getting animation depends upon the scenario and the specific type of 
animation used. The more attention an animation effect demands, the shorter the duration should be. While very 
subtle effects that demand little attention (like slow pulsing) can be played indefinitely, attention demanding 
effects should only be played between 1 and 3 seconds. Anything longer risks making the animation 
overwhelming and annoying. 


In Windows 7, the taskbar flashes for attention for only a second. Any longer would be annoying. 
Effect decay 


You should design attention-getting animations based on the assumption that if users don't respond right away, 
it is because they are busy doing something else and don't want to be interrupted. Thus, your goal should be to 
attract attention without demanding it. 


To get the right balance of attracting attention without demanding it, decay the intensity of an effect over time. 
For example, to attract attention you can make the effect initially strong, but then slow down the effect quickly. 
By doing so, the attractive power is mostly determined by the initial effect, but the user's overall impression is 
determined mostly by its finish. 


(83 lasaal 


In Windows 7, the taskbar flash effect slows down at the end. 
What about PowerPoint? 


Microsoft PowerPoint ®transitions often deliberately violate these guidelines because they are designed to draw 
attention to slide transitions and require users to wait for them. Furthermore, they don't have any particular 
meaning so they communicate nothing beyond the fact that a slide is changing. 


PowerPoint-style transitions, when used properly, have these purposes: 


« They break long presentations into smaller chunks by forcing the presenter to pause. 

« They draw the audience's attention toward changes in the presentation, helping people refocus if their minds have wondered. 
« They give the presentation a rhythm so that it doesn't feel monotonous or overwhelming. 

« Their style reflects the personality of the presenter or of the material. 


While these are important goals for a presentation, such transitions would draw unnecessary attention in the UI 
of most types of programs, and would become tiresome quickly. 


Bottom line: Don't use PowerPoint-style transitions as a model for your program. 


If you do only six things... 

1. Use animations and transitions to make your program easier to understand, and feel smoother and more 
engaging. They should have a clear purpose. Don't use animations just because you can, or to draw unnecessary 
attention to your program. 

2. Define an animation vocabulary and use it consistently throughout your program. Use the Windows 7 


animation vocabulary when appropriate, 
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3. Use the characteristics of your animations to give your program personality and reinforce its brand. 

4. Make most animations simple, brief, and subtle. Remember that animations don't have to demand attention 
to be successful. If an animation is appropriate and natural, users will only notice its absence. 

5. Make your animations fast and responsive, and give them a lightweight feel. No matter how engaging your 


animations are, nobody is going to want to feel like they are waiting for them. Design heavier animations to have 
graceful degradation. 


6. Design for the long run. If an animation is annoying, distracting, or tiresome, redesign it or remove it. 


Usage patterns 


Animations have several usage patterns: 


Hover feedback Indicates that the interaction point is active. Hover can be shown through a static effect as well. 


To show where Windows vocabulary: Display hover effect (bounding rectangle, highlight, enlargement) with a fade in/fade out effect for 
the interaction | smoothness. 


point is. 


6 ALBUMS BY DATE ADDED 


RICHARD 
Freedom Ninja Tuna Fine Music, Vo 
Akon Mr. Scruff Richard Sto 


ans 


Bob Acti The Best Of T! Live From Aus 


Bob Acri 2008 2007 


In the Zune®digital media player, album covers highlight and add playback controls on hover. 


Clickfeedback —_ Indicates that an object has been clicked. 


To show thata Windows vocabulary: Flash object background on click down event. To show touch contact, use a ripple effect. 
clickable object 

is responsive and 
received a click. 


Touch displays a ripple animation so that the user knows the interaction was recognized. 
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Selection 
feedback 


To show that an 


object is 
selected. 


Progress 
feedback 

To show that a 
task is being 
performed. 


Attractor 
To show that 


Indicates that an object is selected. Selection can be shown through a static effect as well. 
Windows vocabulary: Draw selection rectangle with a fade in/fade out effect for smoothness. 


DRT TET 6 
4 ae 
maja Con 
Ninja Tuna Ninja Tuna Ninja Tuna 
Mr. Scruff, 2008 Mr. Scruff, 2008 Mr. Scruff, 2008 


In Zune, album covers blink on click, and then get a selection rectangle on selection. 


Progress feedback indicates that a task is making progress, typically with activity indicators, progress bars, or animations that 
illustrate the task. Determinate progress feedback shows roughly how much of the task has been done and how much remains, 
whereas indeterminate progress only indicates that the task is being done. 

Windows vocabulary: Spinning activity indicators, progress bars, progress backgrounds, illustration animations. 


Privacy statement | Server status 


In this example, Windows Live™ M essenger displays indeterminate progress feedback during sign-in. 


Attract the right level of attention when significant objects are created or need attention (often due to change), or important or 
urgent events happen. See Attracting the right level of attention for design techniques. 


something needs Windows vocabulary: Flashing, moving, pulsing, glowing, gleam. 


the user's 
attention. 


° x QB Windows Live Bing ( ~ | What's New....Prafile....Mail..., Photos al Sign in 


° x BY Windows Live Bing fF) ~ © What'sNew  Profile,... Mail... Photas mal Sign in 


The Windows Live toolbar animates on first appearance to make it obvious where it is. 
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Relationship Show relationships, especially when the relationship might not be understood or expected, in a way that's not distracting or 

To show the confusing. 

relationship Windows vocabulary: Morphing, transportation, physical change such as flipping over, growing from a point source, shrinking to a 
between objects point destination. 

or causality in 


effects. 
Adjust gamma 

In this example, the animation shows the relationship between the gamma setting and its affect on the display. 
Illustration/ An animation or video that explains a concept or how something works visually, either to supplement or replace a textual 
Preview explanation. Doing so allows users to perform tasks or choose commands efficiently and confidently. 
To explain 
visually a 
concept, task, or 
the effect of a 
command. 


In this example, the Tablet PC Input Panel "show me" commands use illustrations to show how to correct, delete, 
split, and join. 


Transitions have several usage patterns: 
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Object grow/ Object changes between states, possibly while moving. Transition keeps users oriented during changes. 
shrink/appear = Windows vocabulary: Morph, change size, object slides in or out. 

To change an 
object's size or 
state smoothly. 


Weather 


Current location: 
Redmond, WA 


Select current location 


© | Search for location | P 


n automatical 


How does Windows find my location automatically? 


Show temperature in: 
© Fahrenheit 
© Celsius 


In this example, the Weather Gadget morphs from its concise state to display its Options dialog box. 


Content show/ Window interior reshapes to display more, less, or different content. Transition keeps users oriented during changes. 
hide/ change Windows vocabulary: Pane slides in or out. Flyout windows fade in and out. Different content fades or rolls in. 

To show, hide, or 

change content 


smoothly, — 
yall 10h ! . |) Calculator ! |s) Calculator 


Fore. i ; View Edit Help View Edit Help 


The Windows Calculator has a smooth transition between view modes. 


Control or Display controls when users are hovering the pointer over a command area, or display affordances when users are hovering over 
affordance a control. Hovering over these areas indicates that the user intends to interact. Affordances may hide if the pointer becomes stationary. 
show/hide 

To smoothly 

show or hide 

controls or their 

affordances on 

hover or mouse 

move in order to 

simplify the 

normal visual 

appearance. 
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Maid with the Flaxen Hair 


RICHARD 


10a 
MAID WITH FLAXEN HAIR 


In this example, the Windows M edia Player controls fade in on hover when in full screen mode. 


Scene transitions Abrupt scene changes can be jarring, especially for large screen areas, so use scene transitions to create smoothness and continuity, 
To make ascene and to provide context. Scene transitions are designed to be natural and low key, to avoid calling attention to the process of 
transition transition itself. 

smooth and Windows vocabulary: Fade in/out; cross fade; sliding in/left, out/right, up, down; pushes and covers. 

seamless in 
order to avoid 
attention. 


In this example, the Windows desktop wallpaper gently cross-fades between images to make the transition feel 
smooth and controlled. 


Special scene While most scene transitions should not call attention to the process of transition, some are designed to break the flow and 
transitions draw attention in order to emphasize that something different is about to happen. To draw attention, special scene transitions 
To draw are designed to be unnatural and have high visual impact. 

attention to a 
scene change to 
make it special 
or refocus the 
user's attention. 


In this example, PowerPoint uses attention-getting transitions to draw the audience into the change. 
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Direct 
manipulations 
To show the 
effect of direct 
manipulations 
(such as move, 
scroll/pan, 
rotate, and 
zoom). 


Incorrect direct The transition shows the manipulation being attempted, but reverts back to the original state. Often the effect looks like 
the manipulation can't be performed due to some real-world physical restriction. These animations are used instead of text-based 


manipulations 
To indicate that 
a direct 
manipulation 
(such as move, 
scroll/pan) was 
attempted but 
could not be 
done. 


Sort, filter, 
reorder 
transitions 

To indicate that 
the presentation 
or content of a 
collection of 
items has 
changed. 


The transition shows the effect of the manipulation in real time. The effect should feel smooth, continuous, and consistent with the 
real world. Moving and rotating may not be continuous in some places to indicate restrictions or likely preferred choices. 


Zooming makes content larger or smaller, possibly changing the level of detail accordingly. 


Magnifier 
4 g 


» Magnifier 
®e Mag 


In this example, M agnifier zooms smoothly between levels. 


error messages, which would disrupt the real-world feel of the manipulation. 
Windows vocabulary: bounce 


end of the document 


In this example, the document bounces to show that the user has reached the end. 
The transition shows (or for complex changes, suggests) the effect of the change. 


SSUAL SEARIOM Sot by Name 


ha) la a Lai — jam (al 
nay ” ie ais me ie 
Ls] fai) Lal Lael ila. Cdl 


] TSUAL SEARO Sot by Name ~ 
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AL SEARCH Sot by Name — 


iam ial ad) de @ wih a J : 
mus (ie) Hai ia ie &) Val fla 
— ne = cuts (Ms | als 


Maid with the Flaxen 


Hair Hair 
Richard Stoltzman Richard St 
Fine Music, Vol 


In this example, Windows M edia Center uses a reorder transition as a special experience while a song is playing. 


Performance While any transition has the potential for making an action appear to happen faster, the primary purpose of these transitions is 
transitions to improve the perception of performance and responsiveness. A good technique is to show the task being performed in 

To make an deliberate steps. By contrast, delaying the action, rendering the results in a haphazard manner, or using an activity indicator will 
action appear to feel slow. 

happen faster. | Windows vocabulary: Perform action in stages, with smooth transitions between the stages. 


Frequent 


“@ MSN.com 
B® Live Search 


@ Internet Explorer @ Internet Explorer 


@ Unpin this program from taskbar @ Unpin this program from taskbar 


=Z Close window =Z Close window 


In this example, a taskbar Jump List immediately displays the standard items, and then slides out to display the 
destinations once the list is ready. Doing so disguises the time required to build the list. By contrast, delaying the 
initial display would feel unresponsive, and displaying an incomplete list or progress feedback would feel much 
slower. 


Special While any transition has the potential for being a special experience, these transitions are best reserved for infrequent experiences 
experiences that are truly special to your program. Custom transitions are used to give a special feel. Branding and personality are often 

To engage and _—_ important design elements. Unlike other patterns, special experiences can demand attention, be heavy, and require users to wait 
delight users a moment. Consequently, these transitions wear out quickly if overused because the experience is no longer special. 

during 
infrequent, 
special 
experiences that 
are important to 
your program 
and have the 
user's full 
attention. 


Windows Media Center 
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In this example, Windows M edia Center displays an animation while loading to immediately engage users. 


Guidelines 


Effective communication 


Define and use an animation vocabulary to ensure that your animations and transitions have a consistent meaning, and use 
it consistently throughout your program. M ost vocabularies should include entries for scene and object appearance and 
disappearance, navigation, basic interaction (hovering, selecting, clicking), object manipulation and interaction (moving, 
dropping, resizing, scrolling, panning, zooming, rotating, filtering), and attracting attention. Consistent meaning is crucial to 
effective communication. 


Whenever practical, use the Windows animation vocabulary. While your program may have a different audience and different 
needs, often the benefits of consistency and familiarity outweigh the benefits of being different. If your program's vocabulary must 
be different, use the same basic animation types as Windows, but give them the right personality for your program. 


Don't assign specific meanings to generic animations and transitions in an animation vocabulary. Generic transitions like fades 
and special effects like dissolves have no particular meaning (beyond appear or disappear), so they can be used freely. 


Incorrect: 


a ? i « Appearance and... » Personalization v| + 


Control Panel Home 


Gre ngensanaiszatioand sounds 


Syageandsegiityns comphters : | 

Wiebvgecaadsatenntters Click a thes ae Lo, change the desk bac ll und, window 
color, s 1s 5 Sc i a : 

Caesarean Sewn picture . SHA AOE n save 


Programs = [Ree fay 
M ce Ext 


User Accounts Cand ofper 
os screen ue 


Appearance and 
Connie 


Personalization 
Clock, Language, and Region . Deskt 

Ease of Access tl Add gadgets to the d i lk 
Display Get mors gadgets onlin 


Unseve: ore — gadge 


Taskbar and Start Menu 


Ease of Access Center 


In this example, a cross-fade is incorrectly used to navigate to the next item. Because cross-fades have no 
particular meaning, this transition doesn't provide context. 


Make vocabulary entries clearly distinct. Related actions may have similar effects (for example, zooming in and zooming out 
should have inverse transitions), but unrelated actions should have clearly distinct effects (for example, zooming should never 
be confused with rotating). 


Keep real-world effects realistic and consistent. If you use realistic animations and transitions, keep the experience consistent with 
the real world. Users should never be surprised, confused, or mislead by the results. And for consistency, don't mix metaphors. 


Give inverse actions inverse animations. Doing so meets user expectations and simplifies the vocabulary. For example, if a 
pane appears by sliding in, remove it by sliding out—not with some other effect. 


Make animations comprehensible. Users should be able to understand quickly the purpose of an animation. It's possible to make 
an animation too small, too brief (less than 50 milliseconds), or so subtle that users aren't able to comprehend their purpose. In 
such cases, either redesign to make the meaning clear, or remove. 


Incorrect: 


Deleting 


from Local Disk (D:) 
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In this example, the effect is so small and subtle that few users can comprehend its purpose. Better to redesign or 
remove. 


Patterns 
Hover feedback 


- To appear responsive, strive to play animation within 50 milliseconds of entering or leaving the hover state. 
- To appear fast, make the duration of hover animations less than 50 milliseconds. 
. Use a fade in/ fade out of hover effect. Doing so makes hover effects clearly distinct from click and selection feedback. 


Click feedback 


- To appear responsive, strive to play animation within 50 milliseconds of click down event. Click up events don't need click feedback. 
- To appear fast, make the duration of click animations less than 50 milliseconds. 


. Use a background flash or blink effect. Doing so makes click effects clearly distinct from hover and selection feedback. Because 
clicking requires hovering, make click feedback a smooth addition to hover feedback. 


Selection feedback 


- To appear responsive, strive to play animation within 50 milliseconds of selection or deselection. 
- To appear fast, make the duration of selection animations less than 50 milliseconds. 
. Use a fade in/ fade out selection rectangle effect. Doing so makes selection clearly distinct from hover and click feedback. 


Progress feedback 


Use a progress bar when a task will take more than five seconds. For more guidelines, see Progress Bars. 


Use progress feedback animations that help users visualize the effect of long-running tasks. Avoid unnecessary progress 
feedback animationsa€” if an animation doesn't communicate anything helpful, use a progress bar instead. 


Have clearly identifiable completion and failure states. Users must be able to determine these final states quickly. 


Stop showing progress when the underlying task isn't making progress. Users need to be able to determine if progress isn't 
being made, and react accordingly. 


Attractors 


. Use attractors with restraint. Unless the information is urgent, critical, or otherwise likely to affect the user's immediate behavior, 
it's usually better to change state inconspicuously and let users discover the change on their own. Solve distractions, 
not discoverability. 


| 
al fl ol cd 


In this example, the wireless network notification area icon uses an animation for critical problems, but lets users 
discover weak signals on their own. 


Choose an animation that draws the right level of attention. Attractor animations should draw just enough attention to themselves 
to fulfill their purpose, but no more. If the user must act immediately, choose an effect that demands attention no matter where 
the user is looking. For other situations, refer to the Attracting the right level of attention section to get the right combination 

of attention, noticeability, and urgency. 


Incorrect: 


inne f. 


What would you like to do? 
Select a different Office Assistant 
a to get assistance while you work 
® Troubleshoot bulleted and numbered lists 
® Troubleshoot the Office Assistant 
® Troubleshoot graphics on Web pages 
‘YW See more... 
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The M icrosoft Office Assistants attracted unnecessary attention to themselves. 


. If the user doesn't respond, don't repeat the animation or use continuous animations. Instead, assume that the user chose not to 
act now, but may act later. Continuous animations make it difficult for users to concentrate on anything else. 


Relationship animations 


. Use relationship animations to show where objects came from or where they went. 


- Relationship animations must start or end with the selected object. Don't show relationships between objects the user isn't 
currently interacting with. If users notice at all, what they'll notice is the distraction. 


Illustrations/ previews 


Use previews to show the effect of a command without users having to perform it first. By using helpful previews, you can 
improve the efficiency and ease of learning of your program, and reduce the need for trial-and-error. 


Use illustrations and previews that have a clear interpretation. They have little value if confusing. 


Play only one illustration at a time to avoid overwhelming users. If multiple simultaneous illustrations are possible, use mouse hover 
ora play button to let users indicate their interest. 


Play an illustration automatically if it is the main purpose of the window or page. Otherwise, if it's optional, let users play it when 
they are ready. 


Play animations at the optimal speedd€” not so fast they are difficult to understand, but not so slow they are tedious to watch. 


Object grow/ shrink 
- Don't clip content during a resize. Expand containers before adding content. Remove content before reducing containers. 
Incorrect: 


fal Calculator 
View Edit Help 


(@) Degrees Radians Grads || MC 


| Int sinh || sin 


|| | 
| dms || cosh || cos 


| 1] 
tT | tanh | tan 


| F-E || Exp || Mod 


In this example, content is clipped during a resize. 
Content show/hide/ change 
- Display important information statically. Users shouldn't have to access important information through progressive disclosure. 
Control or affordance show/hide 


- Display important controls when the user positions the pointer anywhere within the window or pane, or, if full screen, on 
mouse move. Users shouldn't have to hunt for these controls, so make their discovery certain. 
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In this example, Windows M edia Center displays its controls whenever the pointer is over the window. 


- Display secondary controls or control affordances when the user positions the pointer on or near the commands. For 
easy discoverability, make the location obvious and the target large. 


Share a quick message * irs 


In this example, Windows Live Messenger displays a secondary command when the pointer is near the upper right 
corner. 


Scene transitions 


- Make physical scene transitions consistent with natural mapping. People read from left to right in Western cultures, and 
hierarchical diagrams flow from top to bottom. Consequently, going forward in time is indicated by left-to-right movement. 
The following physical scene transitions have natural mapping: 


Transition Meaning 
From left Move back in task flow 
From right Move forward in task flow 
From top Move up task hierarchy 
From bottom M ove down task hierarchy 
- If your program plays sound, design scene transitions and audio transitions together. For example, if a scene fades out gradually, 


any sound should fade gradually as well. Don't ruin seamless visual transitions by having abrupt sound transitions. For more 
sound guidelines, see Sound. 


Direct manipulations 


« When using physical gestures in the interaction (like tossing), design the animation to feel like a natural response to the gesture. 


Link the interaction cause with the transition effect. Give the animation real-world physical characteristics such as 
acceleration, deceleration, momentum, resistance, weight, bounce, and rotation. 


- To maintain a direct feel, keep an object's contact points under the pointer smoothly throughout the interaction. Any lag, 
choppy response, or loss of contact destroys the perception of direct manipulation. Objects should never disappear while 
being manipulated. 


Sort, filter, or reorder transitions 


- For simple changes, show the entire transition. Users will be able to follow the entire transition easily. Simple changes involve 
four items or fewer. 


- For complex changes, emphasize the end of the motion as it slows down, and let the eye fill in the rest. Doing so makes the 
motion feel much more responsive and orderly. 


Performance transitions 


- Consider performing slow transitions in two or three stages to make them appear faster and immediately interactive. Use 
the following composition order when appropriate: 
o External frame 


o Background 
o Initial content (using a temporary representation if necessary) 
o Primary controls (so that users can interact immediately) 
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o Secondary controls and any remaining UI elements 


o Final content (if a temporary representation was used) Use transitions like fades and slides to make the composition appear 
smooth, orderly, and refined. 


When scrolling in "Bird's eye" view, Bing maps display a temporary grid background. Doing so allows users to 
continue to scroll immediately, well before the final content is rendered. 


Special experience animations 


- Reconsider animated splash screens (as well as static splash screens). Often splash screens just draw attention to how longa 
program takes to load, and they wear out their welcome quickly. While splash screens are acceptable if they are displayed only 
when user interaction isn't possible, whenever practical a better alternative is to design your program so that users can interact with 
it immediately, even while it is still loading. 


- Provide a Skip Introduction command if an animated splash screen takes more than three seconds. Clicking anywhere on the 
splash screen should also dismiss it. Alternatively, use a short version of the animation after an initial period. 


Performance 


- Don't make users wait for your program's animations and transitions. Use brief animations and transitions (less than 200 
milliseconds) whenever practical. Use faster animations (100 milliseconds) for more frequent operations. Design longer 
animations (more than one seconda€” usually the progress feedback, illustration, and special experience patterns) so that users 
can continue to work while they are running. 


Design long-running animations to make it clear to users that they can interact while the animation is running. Users won't attempt 
to continue to work if the visual clues suggest that they can't. 


Done — 


In this example from Windows Internet Explorer® the low-key progress bar in the status bar suggests that users 
don't have to wait for completion before they can interact. 


Use lightweight animations for CPU-intensive tasks. Doing so gives full processing power to the task. Furthermore, users won't 
perceive that the lightweight animation is the reason why the task is CPU-intensive. 


Don't display an activity indicator during an animation or transition. Doing so destroys the effect. Design animations and transitions 
so that they are able to start right away. 


Design animations to degrade gracefully whenever there are insufficient system resources. Animations can degrade by 
having variations that require fewer resources (such as shorter lengths or lower frame rates), or even not running at all. Regardless 
of the resources available, make sure the animations have high quality and look like animations instead of software bugs. 


Incorrect: 
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Guidelines 


Design Principles 
Controls 


Messeces 
Interactio 
Windows 
Visuals 

Experience 


Performs 


In this example, the window restore transition is used even though there aren't sufficient system resources to play 
it well. Consequently, the frozen frame appears to be a bug. If the resources aren't available, it's better to just 
display the window without a transition. 


Animation characteristics 
Well-designed animations and transitions generally have these characteristics: 


- Brief duration. M ost animations should be between 100 and 300 milliseconds, preferably either 1/6 second (167 milliseconds) or 
1/4 second (250 milliseconds). (Special experiences and progress feedback can be longer.) Use faster animation times for more 
frequent operations. Generally, longer animations take more time to complete, take more time to understand, and feel slow. 


- Responsiveness. Animations should start within 50 milliseconds of the initiating event or user action. Longer start times 
feel unresponsive. 


- Acceleration/ deceleration. To look natural, most animation effects need to accelerate when starting and decelerate when stopping. 
To look responsive, design animations to have fast starts. To appear controlled, design animations to have soft landings at the 
end. While this applies to motion effects, it also applies to any effect that suggests movement, such as zooms and even fades. 


Speed 


EAS 


Time 


Most animations should have fast starts and soft endings to have a responsive, yet controlled feel. 


Motion. Animations portraying motion in particular need to accelerate and decelerate, so don't use linear motion unless 
animation duration is very short. Motions should take the shorts path from beginning to end, without overshooting. The full 
motion path is not always required. When appropriate, emphasize the end of the motion as it slows down, and let the eye fill in the 
rest. Doing so makes the motion feel much more responsive and orderly. When animating the motion of several objects 
simultaneously, give them slightly different paths with slightly different timings to feel more natural. 


Frame rate. M ost animations should use a frame rate of 20 frames per second. If the animation is for a special experience or is 
related to the main purpose of the program, consider using a higher rate of 24 4€“ 30 frames per second to improve smoothness 
and realism. 


Scale. Design animations to work well across their entire range of intended usage. For example, page transitions should be designed 
to work for all page sizes. 


Personality. Design animations to feel natural, subdued, and efficient rather than artificial, whimsical, or slow. 


Animated text 
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« While you may display text using a transition, don't continuously animate text. Animated text is often distracting and more difficult 
to read than static text. Exceptions: 
> You may animate text in situations where it is traditionally animated, and you provide an accessible alternative. 


> You may animate text if the purpose of the text is primarily decorative. 


In this example, Zune animates text but its purpose is primarily decorative. There isn't a problem if users don't 
carefully read the text. 


Reducing power consumption 


- Design your animations to reduce power consumption. When designed properly, animations shouldn't increase power 
consumption significantly. To reduce power consumption: 
> Stop animating when the display is off. The display may be off for the purpose of saving power. 


> Don't use long-running animations that aren't user initiated. Animations that use high-resolution periodic timers reduce the 
efficiency of processor power management. Also, be sure to disable any high-resolution periodic timers when the animations 
are complete. 


> Suspend all animations when the system becomes idle. The period of user inactivity to become idle is determined by Power Options 
in Control Panel. 


Developers: For more information about designing for power management, see Application Power Management 
Best Practices. 


Accessibility 


- Don't use animation as the only way to convey essential information. Animations should communicate information that is useful 
but not critical, because they aren't accessible to users with visual impairments. 


. Make sure equivalent information is available through other means, such as: 
o By inspection. Users can determine equivalent information by looking at the screen or objects involved in the animation. 


o By simple interaction. Users can determine equivalent information by hovering, clicking, or double clicking. 


The Bing home page has an initial animation that reveals several hot spots. Users can also display the hot spots by 
moving the cursor near them. 


Note that "equivalent information" doesn't mean identical information. The information might be in a different format or require 
simple deduction. 


« When appropriate, set input focus on the object changed during a transition. Doing so enables assistive technologies to detect 
where the change happened. But don't change input focus when the user is using the keyboard. 


- Don't use animations or transitions that flash or resize objects quickly. Flashing and rapid screen changes can cause problems 
for people with seizure impairments and other neurological disorders. 


- Allow users to turn off your program's animations and transitions. To support this ability, respect the Turn off all 
unnecessary animations option in the Ease of Access Center in Windows. 
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Developers: You can determine if animations are enabled using the SystemParametersinfo API. 


- Design tasks assuming that users will turn your program's animations off. M ake sure that doing so doesn't disrupt the task 
flow significantly. 


For more accessibility guidelines, see Accessibility. 


Documentation 


- Avoid referring to animations whenever possible. Instead, refer to the object being animated and, if necessary, the type of animation. 


- Don't refer to transitions, except in technical documentation. Instead, refer to the object in its final or initial state. 
« If the user explicitly initiates an animation, use the verb play; otherwise use the verb use for technical documentation. 


Examples: 


« You'll know that an item needs your attention when its icon starts bouncing. 
« First, select the photos that you would like to print (note that the photos are enlarged upon selection). 
. Use a cross-fade transition to change an object's state seamlessly. 
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Graphic Elements 


Is this the right user interface? 
Usage patterns 
Guidelines 
General 
Graphic designs 
Backgrounds and banners 
Glass 
Separators 
Shadows 
High dpi support 
Text 


Graphic elements show relationships, hierarchy, and emphasis visually. They include backgrounds, banners, glass, 
aggregators, separators, shadows, and handles. 


[VD | 
on rex 


©- J) « Public Pictures » Sample Pictures ¥ +4 | Search Pp 


Glass 


ME SlideShow fo: Print’ Ml E-mail» 


Favorite Links 


IE) Documents 
Ee Pictures 


Shadow Ay Music 
(3 Recently Changed 


Creek 
Desert Landscape 
Dock 


Searches 
Public 


Forest 


Gunga 


Forest Flowers 


| 


Frangipani Flowers 


Garden 


BEB 


Folders Green Sea Turtle 


Autumn Leaves [ate taken: 11/5/2005 9:12 AM Dimensions: 1024 x 768 
JPEG Image Tags: Sample; Landscape Size: 269 KB 
Rating: Www 


Separator Background Graphic design 
An example with several types of graphic elements. 


Graphic elements are usually not interactive. However, separators are interactive for resizable content and 
handles are graphics that show interactivity. 


Note: Guidelines related to group boxes, animations, icons, and branding are presented in separate articles. 


Is this the right user interface? 


While graphic elements are a strong visual means of indicating relationships, overusing them adds visual clutter 
and reduces the space available on a surface. They should be used sparingly. 


A design trend in Microsoft ®Windows@®is a simpler, cleaner appearance by eliminating unnecessary graphics and 
lines. 


To decide whether a graphic element is necessary, consider these questions: 
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- Isthe design's presentation and communication just as clear and effective without the element? If so, remove it. 


- Can you effectively communicate the relationships using layout alone? If so, use layout instead. You can place related controls next 
to each other and put extra spacing between unrelated controls. You can also use indenting to show hierarchical relationships. 


2 


e 


System and Maintenance User Accounts 
Get started with Windows (@ Change account type 


Back up your computer 


Seewat ; Appearance and Personalization 
ecurity Ay, Change desktop background 
Check for updates 


b- : : Customize colors 
(© Allow a program through Windows Firewall Adjust screen resolution 


In this example, layout alone is used to show control relationships. 


- Isthe communication effective without text? If not, use a group box, labeled separator, or other label. 


Usage patterns 


Graphic elements have several usage patterns: 


Graphic Graphic illustrations are similar to icons except that they can be any size and usually aren't interactive. 


illustrations 

Use to 
communicate an 
idea visually. 


In this example, a graphic illustration is used to suggest the nature of a feature. 


Backgrounds Backgrounds can be used to emphasize important content. 
Use to 
emphasize or de- 


eae This tool scans your hard disk for viruses and 
irerent types tries to remove them. To proceed, click Check 
of content. My PC for Infection. 


Check My PC for Infection 


Note To use this tool, you must agree to the 
terms of the end user license agreement. Your 
computer may also display a warning that the 
tool is attempting to run; click Yes to proceed. 


In this example, a background is used to emphasize an important task. 


Backgrounds can also be used to de-emphasize secondary content. 
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Gv-e& > Control Panel > 


Control Panel Home 


System and Maintenance 
Security 

Network and Internet 
Hardware and Sound 
Programs 

Mobile PC 

User Accounts 


A 


pearance and 
ersonalization 


Clock, Language, and Region 


Ease of Access 


Additional Options 


Classic View 


In this example, secondary tasks are de-emphasized by locating them in a task pane. 


Banners In contrast to backgrounds, banners emphasize primarily a single text string. 
Used to indicate 

important ; ; = 

status. -@ Some Settings are managed by your administrator. Mor 


In this example, a banner is used to indicate that the page's settings are controlled by Group Policy. 


Glass Glass can reduce the weight of a surface by focusing on the content instead of the window itself. 
Use strategically 

to reduce the 

visual weight of 

a window. 
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{yj Toco Toucan - Windows Photo Gallery 


“=~ 
© Back To Gallery B fic ~ & Fix 8 Info Fa Print ¥ P=) E-mail 
all 


~ 


In this example, glass focuses the user's attention on the content instead of the controls. 


Aggregators 
Use to create a GCS8- 


visual 
relationship lth ; : 2 : 
n this example, an aggregator background is used to emphasize the relationship between the Back and Forward 
between : 
buttons in Explorer. 
strongly related 
controls. 
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Separators 

Use to separate 
weakly related 
or unrelated 
controls. 


Shadows 

Use to make 
content stand 
out visually 
against its 
background. 


{yj Toco Toucan - Windows Photo Gallery 


P=) E-mail 


© Back To Galley [@ Filey GS Fix 8 Info Fa Print ¥ 
all 


~ 


In this example, a boundary aggregator is used to emphasize the relationship among the controls, and make them 
feel like a single control instead of eight. 


Separators can be either interactive or non-interactive. Interactive separators between resizable content are known as 
splitters. 


- 
¢HName 


In this example, an interactive separator is used for resizable content. 


_ Date taken 


Default web browser 


“3 Internet Explorer is the default web ly 


browser. 
In this example, the separator isn't interactive. 


Make default 


In this example, shadows make the artwork stand out against the background. 
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Handles Handles are always interactive and their behavior is suggested by the mouse pointer on hover. 
Use to indicate 


that an object 
can be moved or 
resized. 


In these examples, handles indicate that an object can be resized. 


Guidelines 


General 


Don't convey essential information through graphic elements alone. Doing so presents accessibility issues for users with 
visual disabilities or impairments. 


Graphic designs 


Graphics are most effective when they reinforce a single simple idea. Complex graphics that require thought to interpret don't 
work well. Hieroglyphics are best left for cave drawings. 


Incorrect: 


Security Warning 


C:\Porogram Files\Microsoft\Fabrikam,DLL 


contains macros by 
Microsoft Corporation 


Macros may contain viruses, It is always safe to disable 
macros, but if the macros are legitimate, you might lose 
some functionality. 


The security level is set to High. Therefore, you cannot 
enable macros from sources that you do not trust, 


Always trust macros from this source. 


Disable Macros Enable Macros 


In this example, a complex graphic from Windows XP ineffectively attempts to explain a complex trust decision. 


Don't use arrows, chevrons, button frames, or other affordances associated with interactive controls. Doing so invites users 
to interact with your graphics. 


Avoid swaths of pure red, yellow, and green in your designs. To avoid confusion, reserve these colors to communicate status. If 
you must use these colors for something other than status, use muted tones instead of pure colors. 


Use culturally neutral designs. What may have a certain meaning in one country, region, or culture may not have the same meaning 
in another. 


Avoid using people, faces, gender, or body parts, as well as religious, political, and national symbols. Such images may not 
easily translate or could be offensive. 


When you must represent people or users, depict them generically; avoid realistic depictions. 
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Backgrounds and banners 


- To emphasize content, use dark text on a light background. Black text on a light gray or yellow background works well. 
? Not sure where to start? Get recommendations to make your computer easier to use 


In this example, the link gets the user's attention because it is on a yellow background. 


- To de-emphasize content, use light text on a dark background. White text on a dark gray or blue background works well. 


€ Ask someone or expand your search 


Online Help v 


In this example, the dark background de-emphasizes the content. 


- Ifa gradient is used, make sure that the text color has good contrast across the entire gradient. 


- Always use a 16x16 pixel icon to draw attention to the banner. Banners are too easy to overlook otherwise. For more guidelines 
and examples, see Standard Icons. 


- Use backgrounds and banners with caution. While the intent of the background or banner may be to emphasize content, quite 
often the results are the opposite—a phenomenon known as "banner blindness." 


Glass 


- Consider using glass strategically in small regions touching the window frame without text. Doing so can give a programa 
simpler, lighter, more cohesive look by making the region appear to be part of the frame. 


- Don't use glass in situations where a plain window background would be more attractive or easier to use. 
Separators 


- Use vertical and horizontal lines for separators. Be sure to have sufficient space between the separators and the content 
being separated. 


- For separators between sizable content (splitters), display the resize pointer on hover. 


4 |p| Playlists Title 
[e} Create Playlist 
4 Ja Library 
[=] Recently Added it 
, Artist 
©) Album 


vefDate me 


aly My Ratings 


Unrated 


In these examples, resize pointers are shown on hover. 
Shadows 


- Use only to make your program's most significant content or objects being dragged stand out visually against its 
background. Consider shadows to be visual clutter in other circumstances. 


High dpi support 


- Support 96 and 120 dots per inch (dpi) video modes. Detect the dpi mode at startup and handle dpi change events. Windows 
is optimized for 96 and 120 dpi, and uses 96 dpi by default. 


- Prefer to provide separate bitmaps rendered specifically for 96 and 120 dpi over scaling graphics. At least provide 96 and 120 
dpi versions for the most important, visible bitmaps, and either center or scale the others. Such applications are considered "high- 
dpi aware" and provide a better overall visual experience than programs that are automatically scaled by Windows. 
o Developers: You can declare a program high-dpi aware (and prevent automatic scaling) setting the dpi aware flag in the 
program's manifest, or by calling the SetProcessDPIAware() API during program initialization. You can use macros to simplify 
selecting the right graphics. For Win32 bitmaps, you can use SS_CENTERIMAGE to center or SS_REALSIZECONTROL to scale. 


- Check your program in both 96 and 120 dpi for: 
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o Graphics that are too small or too large. 

o Graphics being clipped, overlapped, or otherwise not fitting properly. 
o Graphics that are poorly stretched ("pixilated"). 

o Text that is clipped or not fitting in graphic backgrounds. 


Text 


- For accessibility and localization, don't use any text in graphics. M ake exceptions only to represent branding and text as an 
abstract concept. 
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Sound 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Usage 
Playback 
Sound selection 
Windows system sounds 
Sound design 
Mixing 
Windows integration 
DirectSound programming issues 
Text 


Sound is the audio element of the user experience. When used appropriately, sound can be an effective form of 
communication that establishes a non-verbal and even emotional relationship with your users. Sounds can be 
used alone or as a Supplement to visual UI. For example, adding a sound effect to a notification increases the 
likelihood that it will be noticed, especially if the user isn't looking at the screen when an event occurs. 


Playback | Recording Sounds 


A sound theme is a set of sounds applied to events in Windows 
and programs. You can select an existing scheme or save one you 
have modified. 


Sound Scheme: 


Windows Default y| |pSaveasunn|| Delete 


To change sounds, click a program event in the following list and 
then select a sound to apply. You can save the changes as a new 
sound scheme. 


Program 


[=] Windows 
~~] Asterisk 
Close program 
Critical Battery Alarm 
Critical Stop 
Default Beep 


Play Windows Startup sound 


Sounds: 


(None) > Test | Browse... 


From the Sounds tab of the Sound control panel item, users can make changes to their system sounds. 


This article covers the use of sounds within a program as a response to events and user actions, and integrating a 
program's sound control with Windows. It doesn't cover the use of music or speech. 


Note: Guidelines related to notifications and branding are presented in separate articles. 


© 2010, Microsoft Corporation. All rights reserved. 


Page 692 of 882 


Is this the right user interface? 
To decide if you should use sound, consider these questions: 


Is there a clear user benefit to using sound? Because the drawbacks of using sound can easily outweigh the benefits, use sound 
only when there is a clear advantage. 


Is the use of sound appropriate? Does the use of sound draw attention to things that are worthy of attention? Would users miss 
the sound if it were absent? Focus on sounds that keep users informed, are likely to change their behavior, or provide useful 
feedback. 


Is the use of sound distracting? Are there frequent, loud, jarring sounds? Are users likely to reduce the system volume or your 
program's volume as the result of your use of sound? 


Are you using sound as a primary form of communication? In many cases, such as for users who have some level of hearing loss, 
sound should not be used as the primary means of communication. Sound is more effective as a supplement to other means of 
communication (such as text or visuals). 


Are the primary target users IT professionals? Sound is usually ineffective for tasks targeted at IT professionals because many of 
their tasks run unattended. Furthermore, sound doesn't scale for thema€”imagine running hundreds of tasks at a time and getting 
sounds when they complete or fail. 


Design concepts 
Typically sound achieves any or all of the following purposes: 


Notification. Sound can be associated with specific events. For example, a "new mail" sound tells users when mail arrives without 
disrupting their current task. 


Feedback. Sound can provide feedback for specific user actions. For example, a subtle sound that plays when you release the 
slider on the volume control provides feedback about the level of the current setting. 


Branding. Sound can be associated with specific content to brand your product, application, or service. Windows®uses sound in 
this way for the startup of the operating system. 


Entertainment. Sound is commonly used to enhance entertainment products and to make any product more engaging. For 
example, most games, training applications, and consumer products use sound to entertain users and enhance their experience. 


Certain sounds can fulfill several of these purposes at once. The Windows Startup sound, for example, indicates 
that the startup process has completed and the desktop is ready for use. It also provides a powerful form of 
product branding and even momentarily engages users. 


Sounds that fulfill none of these purposes should likely be eliminated. 
Inappropriate use of sound 


Despite the benefits of sound, appropriate use of sound requires significant restraint—to do otherwise can 
make a program annoying and distracting. Users will turn off their sound completely if they become annoyed by 
frequent, repetitive, jarring, disrupting, poorly designed sounds; in part this is because by its very nature, sound 
demands attention and is hard to ignore. For tips on finding a reasonable balance, see the Sound design 
guidelines. 


Because the drawbacks of using sound can easily outweigh the benefits, use sound only when there is a clear 
advantage. When in doubt, don't use sound. 


Make sound supplemental 


Even if the sound is used appropriately, there are many situations where sound might not be effective for all 
users: 


- Some users may work in a noisy environment where the sounds cannot be heard. 
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- Some users may work in a quiet environment that requires sound to be turned off or set at a low volume. 
+ Some users may have hearing impairments or loss. 
- The computer may not have speakers. 


For these reasons, sound used for notifications and feedback should never be the only method of 
communication, but rather should supplement visual or textual cues. 


Desirable characteristics of sound 


In general, sounds should be: 


mid to high frequency (600 Hertz [Hz] to 2 kilohertz [kHz]). 
short (less than one second). 


soft or moderate in volume. 


meaningful. 


pleasant, not alarming or jarring. 
non-verbal. 


non-repetitive. 


With sound, less is more. The ideal sound effect is one that users barely notice, but they would miss if it were 
absent. 


A common misconception is that sounds for critical events need to be loud and jarring to get the user's 
attention. This isn't true, because sound is really meant to be a supplemental means of communication. In the 
case of a critical error message, its presentation (perhaps in a modal dialog box), its icon (an error icon), and its 
text and tone all combine to communicate the nature of the error. An effective error sound can be slightly louder 
than the typical Windows sound, but need not be significantly louder. 


Characteristics of Windows sounds 


Beyond this general call for minimalism, the Windows sound aesthetic uses light, pure tones, and glassy and airy 
sounds, with a soft fade-in and fade-out (soft "edges") to prevent abrupt, jarring, percussive effects. They are 
designed to feel subtle, gentle, and consonant. Windows sounds use echo, reverb, and equalization to attain a 
natural, ambient feel. 


The default sound scheme for Windows doesn't generally use instrumental or recognizable everyday sounds that 
are overly specific or musical. Examples of sounds it avoids are musical instruments such as pianos or percussion 
instruments, animal sounds, environmental noises, speech, voices, movie-like sound effects, or other sounds of 
humans. Also, Windows sounds are not meant to be perceived as music (that is, as long, multi-note melodies). 
This makes Windows sounds functionally distinct from other types of sounds. 


Because the Windows sounds were professionally designed to have the desirable characteristics and appeal to a 
broad audience, consider using these built-in Windows sounds whenever appropriate. 


Designing your own sounds 


If you must create your own sounds, design them to have the previously described characteristics. Strive to make 
them complement their associated tasks or events. 


Understand that creating original sounds is difficult to do well—especially for sounds intended for a broad 
audience. Sound can be a polarizing design element. For every user who loves a sound, there will be many who 
dislike it. 


Design the sounds for your program asa group to feel like they are related variations on a theme. Your 
program's auditory experience should be coordinated with its visual experience. Also, the "tone" of the sounds 
should be coordinated with the tone of the text. Consider how text with a pleasant, natural tone can be 
undermined when accompanied by harsh, alarming sounds. 
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If you do only four things... 
1. Use sound with restraint—make sure there is a clear overall user benefit. When in doubt, don't use sound. 
2. Use the built-in Windows sounds whenever appropriate. 


3. If you design your own sounds, make sure they have the desirable sound characteristics and as a whole feel 
like variations on a theme. 


4. Don't assume that sounds need to be loud and jarring to get the user's attention. 


Usage patterns 


Sounds have several usage patterns: 


Action 
completion 
Sonically notifies 
users when a 
long-running, 
user initiated 
action completes 
successfully. 


File Download 


«Install Messenger.exe from download.microsoft.com 
oo 
Downloaded: 15.5MB in 18 sec 

Download to: D:\Use...\Install_Messenger.exe 

Transfer rate: 886KB/Sec 


[| Close this dialog box when download completes 


[__Run__] [ Open toider ] [__Close _] 


In this example, the dialog box plays a sound to notify users that the download has completed. 


Action failure 
Sonically notifies 
users when a 
long-running, 
user initiated 
action fails. 


In this example, Windows plays a sound to notify users that the backup operation has failed. 
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Important 


system event 
Sonically alerts A Low battery ze 
users of You should change your battery or switch to 
important outlet power immediately to keep from losing 
system events or your work. 
status that 
require 
immediate 
attention. 
In this example, users are alerted that their low battery requires immediate attention. 
FYI Because this information usually doesn't require immediate attention, an FYI sound provides subtle feedback 
Sonically notifies without breaking the user's flow. 
users of 
otentiall 
seta eat EY windows Live Messenger wal 
information. 
S 9 Jonathan 
has just signed in. 
In this example, a sound plays when a contact signs in to an instant messaging service. 
Sound effect Provides real-world or styled sound feedback that is appropriate for the interaction. Sound effects often sound as 
Sonically though the user is manipulating a real-world, physical object. Sometimes referred to as Foley. 
provides 


feedback to user 
interactions. 


oA ae 


_ 
} winery 3h Port 


GNA 


Rhédpoing 

Siste Megenre » 
Spaces : 

Spests > ae 
ining Codgets 1m 


~ 


ite 


c Personalization 


\) Untitled - Paint | /> MSN.com - Windo... 


In this example, the minimize window sound effect sounds like a real-world object is being reduced in size. 
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Brandingsounds Branding sounds are best when synchronized to visual events, especially UI transitions such as the display of a 
A sound program window. True sound brands indicate the source of goods, similar to a trademarked word or logo, and 
provided to are relatively uncommon. 

enhance the 
user experience 
though 
emotional 
impact and, asa 
side effect, 
promote the 
product brand. 


In this example, Windows startup is a branded transitional experience. 


Guidelines 


Usage 


Use sound with restrainta€” make sure there is a clear overall user benefit. Focus on sounds that keep users informed, are likely 
to change their behavior, or provide useful feedback. When in doubt, don't use sound. 


Select the sound and its characteristics based on how it is being used. For a description of each usage pattern, see the table in 
the previous section. 


For notifications and feedback, don't use sound as the only method of communication. Rather, use sound as a supplemental 
method to reinforce visual or textual cues. Doing so ensures that users can see the information if they can't hear the sound. 


Don't play loud or harsh sounds frequently. Doing so is unnecessary and results in a poor user experience. The more often a 
sound is played, the less obtrusive it should be. Sounds don't have to be loud or harsh to attract attention. 


Don't beep. Beeping isn't appropriate for modern programs. Beeps can't have specific meanings assigned to them, and users can't 
control them. 
o Exception: Critical system functions may beep to alert users of situations that they must attend to immediately, such as 
critically low battery power. 


Playback 


- Don't repeat a sound more than two times consecutively. 


- Fora consecutive sequence of related sound events, play a sound only on the first event. Avoid using multiple sounds because 
they may collide with each other or otherwise result in an unpleasant user experience. 


Sound selection 


- Choose pleasant sounds. Don't use unpleasant, alarming sounds, such as buzzing, crashing, and breaking. 
- Use sounds that are short (less than one second). 


- Use sounds that are roughly the same volume as the typical Windows sound. Users dislike having to turn the volume down 
when starting a computer or a program, especially in public environments such as meetings and presentations. The Microsoft® 
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Windows®sound files are located in the M edia folder within the Windows folder. 


Don't choose sounds that require localization. You can achieve this by using sounds that don't use speech or have culturally- 
dependent meanings or connotations. 


Windows system sounds 


Use the built-in Windows system sounds whenever appropriate. 


Choose to use system sounds based on their associated meaning, not just on the sound itself. System sounds must be used 
consistently. 


Sound design 


When creating your own sounds: 


Create sounds with the desirable sound characteristics. 


Compose sounds with mostly mid-range to high frequencies (600 Hz to 2 kHz). Don't use low frequencies because they travel 
farther, are harder to locate, and can be alarming. 


Set the relative amplitude of normal sounds to the level of the typical Windows sound. The Windows sounds have been 
appropriately leveled for home and work environments. Using different levels for your sounds will force users to make volume 
adjustments. 
o Set important sounds to be slightly louder. Such sounds include action completions, action failures, and important system 
events. 


o Set frequently occurring sounds to be slightly softer. These include FYls, branding sounds, and sound effects. 


Choose sounds consistent with the meaning of the Windows sounds. To create a custom version of a Windows sound, preserve 
the same pitch and interval, but change the orchestration or timbre. Don't assign different meanings to sounds with similar 
pitches and intervals as Windows sounds. 


Design the sounds for your program to feel like they are related variations on a theme. Your program's auditory experience 
should be coordinated with its visual experience. 
o Design scene transitions and audio transitions together. For example, if a scene fades out gradually, any sound should 
fade gradually as well. Don't ruin seamless visual transitions by having abrupt sound transitions. 


Sounds must be in .wav file format. The 16-bit, 44.1 kHz stereo uncompressed pulse code modulation (PCM ) format is 
recommended. If file size is important, use compressed or monaural (mono) formats, but be aware that there is an easily 
discernable quality loss that could reflect badly on your application. 


Mixing 


Don't have volume or mute controls in your program. Instead, let users control relative volume settings among applications with 
the Windows volume mixer. If your program has a volume control, there will be multiple places where users adjust their settings, 
which may lead to confusion. 
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ij) Volume Mixer 


Device 


Device Applications 


: 
© ey > 
Speakers Windows Windows Media Minesweeper 
Sounds Player 


C 


C> 


The Windows volume mixer allows users to control the main volume setting as well as the volume for each 
program that is currently playing audio. 


Exception: If the primary purpose if your program is audio or video playback or creation, it may be useful to have a volume 
control in the program. Use a slider control for this purpose and provide immediate feedback when the user changes the volume. 


Windows integration 


Register your program's sounds in the Windows Sounds registry. Doing so allows the Windows volume mixer to add a slider for 
your program. 


Register your program's custom sound events. Doing so allows the Windows Sound control panel item to display them. Create 
the following key for each custom sound event: HKEY_ CURRENT USER| AppEvents| Event Labels | EventName =Event Name. 


Don't hardwire the sounds for your program's sound events. Instead, specify the sounds to be played using registry entries. 
Doing so allows users to customize the sound events through the Sound control panel item. 
o Exception: You can choose to hardwire sounds used for branding. 


Don't provide a way for users to configure sounds within your program's options. Rather, use the Windows Sounds control 
panel item for this purpose. 


Consider not assigning sounds to frequently occurring events by default. Don't require users to configure their way out of an 
annoying initial experience. 


DirectSound programming issues 


Text 


For DirectSound programs that have their own volume control, set the program volume to 100 percent by default. Doing so 
maximizes the dynamic range of your audio. 


Don't lock out other sound events by running your program in exclusive mode. Doing so can prevent other programs from 
working correctly. For example, using exclusive mode prevents a computer from being used as a telephony device. 


Don't use the phrase sound adapter. Use sound card instead. 
Use device to refer generically to speakers, headphones, and microphones. 
Use controller to refer to audio hardware that controls devices, such as sound cards and chipsets. 
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- Use the phrase sound scheme to describe a collection of sounds for common program events, such as logging on or receiving new 
e-mail. Use the phrase desktop theme to describe a collection of visual elements and sounds for your computer desktop. 


- Use the term audio to refer broadly to speech, music, and sounds. Use the term sound to refer more narrowly to the program and 
Windows sounds described in this article. 


© 2010, Microsoft Corporation. All rights reserved. Page 700 of 882 


Experiences 
These articles provide guidelines for improving a variety of user experiences: 


- Software Branding. Seeing beyond ubiquitous product logos and color schemes. 
- Setup. Streamline setup to get your users up and running in your program as quickly as possible. 


. First Experience. Guidelines to design a more effective and elegant initial encounter between your users and 
your program. 


- Printing. Still an important part of what users expect from their overall experience with a program. 
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Software Branding 


Branding is the emotional positioning of a product as perceived by its customers. Successful branding requires 
skillful crafting of a product image, and is not achieved just through product logos and color schemes. 


Design concepts 
Guidelines 
General 
Names and logos 
Controls 
Splash screens 
Sound 


Branding is the emotional positioning of a product as perceived by its customers. Product branding is achieved 
through a combination of factors, including the product name and logo, use of color, text, graphics, and sound, 
the style of various other design elements, marketing, and most importantly, the attributes of the product 
experience itself. 


Successful branding requires skillful crafting of a product image, and is not achieved simply by plastering a 
product logo on every surface and using the product's color scheme at every opportunity. Rather, meaningful and 
high-quality branding that enhances users' experience will be much more successful. 


Note: Guidelines related to icons, fonts, color, animation, sound, and window frames are presented in separate 
articles. 


Design concepts 


In a competitive marketplace, companies brand their products to help differentiate them from the competition. It 
would be naive to suggest that product branding in general is wrong or should be avoided, but it is fair to say that 
software branding is too often executed poorly. The goal of software branding is to associate the brand with the 
style and quality of the product and its experience. Too often, developers attempt to achieve this by drawing 
attention to the program itself. The result is to distract users instead of delight them. 


Attributes of good software branding 
When well done, software branding has these attributes: 


- Establishes a clear, distinct style and personality. 

« Creates an emotional connection. 

« Has high quality. 

- Isstrategically placed and consistently executed. 

- Aligns to the overall brand strategy. 

- Islong lasting...as enjoyable the thousandth time as it was the first. 


By contrast, poor attempts at software branding have these attributes: 


« Has no obvious theme or point. 

« Isin the user's face. 

- Is annoying. 

- Is everywhere. 

« Has a custom look and feel without any user benefit. 
- Becomes quickly tiresome. 


Start with the product itself 


Successful software branding starts with the design of product itself. A well-designed program has carefully 
crafted functionality aimed at an appropriate target audience. Unique functionality and extraordinary attention 


to detail make powerful branding statements. For more information, see How to Design a Great User Experience. 


Carefully choose the product's name 


Great product names drive strong brands. A great software product name is memorable and concisely conveys 
the benefit of the product, providing distinction in a crowded market. Hire a branding professional to help you 
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choose the right product name. In the long term, a well-chosen name is far more important to your branding 
effort than details like logos, color schemes, and control theming. 


What to brand 


Software branding elements can be categorized as follows: 


Some primary branding elements from Windows Vista® 


Primary 


« Product name 
- Product logo 
- Product color scheme 


- Product-specific sounds 


Primary branding elements tend to draw a lot of attention, so they should be used with restraint. Limit your use 
of primary branding elements to a few strategic experiences. Product-specific sounds aren't recommended for 
most programs. 


Secondary 


Element shapes 


Icon and graphic styles 


« Secondary graphic elements 
Accent colors 


- Animations 

- Transitions 

« Shadows 

- Backgrounds and transparency 


Some secondary branding elements from Windows Vista. 
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Secondary branding elements tend to be more subtle, and because of that, they can be used more often. While 
some of these secondary branding elements may not have much impact individually, when taken together they 
can give your product character and style. Transitions can have more impact than fixed graphics, which users 
learn to ignore over time. Prefer the secondary level of branding over the primary level. 


Tertiary 
Finally, there is another category of branding elements to be aware of. 


- Custom window frames 
- Custom controls 


While it's appropriate for certain types of programs (such as games) to create a completely distinct, immersive 
experience based on custom controls and windows, most programs should use the standard varieties. Having 
your programs look and act weird doesn't make for a strong brand identity. Rather, your goal should be to create 
a program with character—a product that stands out while fitting in. 


Where to brand 


Not everything needs to be branded. A few strategically placed branding elements can make a more powerful 
impression than slapping uncoordinated branding elements everywhere. 


Focus your branding effort on the special experiences in your program. These are the places that have the most 
emotional impact, such as: 


- The first experiences, especially when the program is used for the very first time. 
- The main window or home page. 

- The start and completion of important tasks. 

- Important transitions between tasks or program areas. 

« Waiting time during long-running tasks. 

« Login and log off. 


Where not to brand 


While you can potentially use any element in your program as a branding opportunity, don't use the Windows 
desktop (including the work area, Start menu, Quick Launch bar, notification area, or gadgets) for branding. 


The desktop is the user's entry point to Windows. Leave the user in control. Use these entry points 
appropriately—never view them as ways to promote awareness of your program or its brand. For more 
information, see Desktop. 


Use branding professionals 


Branding is a specialized skill best done by experienced professionals. It is far better to expose your users to 
minimal branding than to use extensive branding that is annoying and ineffective. Work with your branding and 
marketing team to create a good end-to-end branding experience. 


If you do only five things... 

1. Start with the product design. The most powerful branding statement is to satisfy your customers’ needs 
especially well. 

2. Choose a good product name that is memorable, distinctive, and concisely conveys the benefit of the product. 
3. Think of branding in terms of experiences and making an emotional connection, not product logos and color 
schemes. 

4. Prefer secondary branding elements. Limit your use of primary branding elements to a few strategic 
experiences. 

5. Get help from a branding professional. 


Guidelines 
General 


- Choose a good product name that is memorable, distinctive, and concisely conveys the benefit of the product. This will be 
the foundation of your brand. 


- Focus your branding effort on the special experiences in your program, such as: 
o The first experiences, especially during setup and when the program is used for the first time. 


o The main window or home page. 
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o Important transitions between tasks or program areas. 
o Login and log off. 


- Prefer secondary branding elements. Limit your use of primary branding elements to a few strategic experiences. For example, 
consider using secondary graphics, transitions, and color instead of logos. Also, avoid prominent primary branding elements in 
places where users spend a lot of time because they may be perceived as clutter. 


Acceptable: 


GvU- | > Control Panel 


Better: 


COuU- > Control Panel > ¥ | + 


Control Panel Home 


Classic View 


Recent Tasks 
Let Windows suggest settings 
Add a printer 


Turn Windows features on or 
off 


Control Panel Home 


Classic View 


Recent Tasks 
Let Windows suggest settings 
Add a printer 


Turn Windows features on or 
off 


v | +4 | | Search 


System and 


Maintenance 
Get started with 
Windows 

Back up your 
computer 


Security 

Check for updates 
Allow a 
program 

@ through 
Windows 
Firewall 


System and 


Maintenance 


Get started with 
Windows 


Back up your 
computer 


Security 
Check for updates 
Allow a 


program 


@ through 


Windows 
Firewall 


Search 


User 


Accounts 
al Change account 
type 


Appearance 
and 


Personalizatio 
Change desktop 
background 
Customize colors 


Adjust screen 
resolution 


User 


Accounts 
e Change account 
type 


Appearance 
and 


Personalizatio 
Change desktop 
background 
Customize colors 


Adjust screen 
resolution 


In the better example, a secondary graphic element is used instead of the product logo for Windows control panel 


items. 


- Don't use branding that is distracting or harms usability or performance. 


- Don't use the Windows desktop or Start menu for branding. For more information, see Desktop and Start Menu. 
Names and logos 


- Limit the use of product and company logos in the user interface. Don't plaster company or product logos on every UI surface. 
o Limit product and company logos to at most two different surfaces, such as the main window or home page and the About box. 


o Limit product and company logos to at most twice on any single surface. 
o Limit product and company names to at most three times on any surface. 
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Incorrect: 


xp 


Copyright © 1985-2001 bedc 
Microsoft Corporation * 


In this example, the company name is overused. 


Incorrect: 


yall or change a program 


bize Free Space 


Internet Documents 
Internet Explorer New Volume (D:) 


D J —_ = — 

ft _ E-mail Recent Documents Go 25.3 GB free of 45.2 GB 

43.5 UD TTEEO J £90 
Microsoft Office Outlook 


Pictures and Video 
Paint 
J 


Music 


—— 


| ey ae ating time remaining... 
< 


Computer ; E 
| WordPad ying 1 item (153 KB) 


— Control Pane P res (D:\User...\Pictures) to Pictures (D:\User...\Pictures) 
Q Snipping Tool jating time remaining... 


iq Windows Photo Gallery 


x i i Cancel 
Connect To 


Help 


All Programs 


Ktart Search 


B Documents 


In this example, while individually the use of the logos is acceptable, the overall effect is overwhelming. 


« Use small product and company logos. Place the logo out of the user's workflow, and choose a size that is appropriate for its location. 


« Use graphic logos. Graphic logos are more stable than text logos because they aren't affected by font, text size, language pack, or 
theme changes. 


- Don't use animated logos. 
Controls 


- Don't use custom controls for branding. Rather, use custom controls when necessary to create a special immersive experience or 
when special functionality is needed. 


Incorrect: 


This example shows a custom control incorrectly used for branding. 
Splash screens 


- Don't use splash screens for branding. Avoid using splash screens because they may cause users to associate your program with 
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- Don't use animated splash screens. Users often assume that the animated splash screen is the reason for along load time. Too 
often, that assumption is correct. 


Sound 


- Generally, sound is not recommended just for branding. If you do use sound for branding: 
o Play asound only at program startup, but only if the program was launched by the user. 


o Synchronize the sound to a visual event, such as a UI transition like the display of a program window. 


For more information, see Sound. 
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Setup 


Users don't enjoy installing software, so modern setup experiences need to be simple, efficient, and problem-free. 


Is this the right user interface? 
Design concepts 
Guidelines 
General 
Windows integration 
User Account Control 
Restarting Windows 
Streamlining setup 
Page types 
Leaving users in control 
Navigation 
Security 
Uninstall 
Help and support 
Text 
Documentation 


Setup usually refers to the experience of installing and initially configuring a program. However, setup can also 
refer to entire installation life cycle, including initial installation, incremental program updates (such as version 
upgrades or service packs), repairing, and uninstalling. 

Most users regard setup as a necessary evil, to be performed as quickly as possible. The point of installing the 


program is to use it, not to make innumerable decisions about configuration and usage, or, worse yet, to spend a 
lot of time answering personal questions used for registration or marketing purposes. 


Installation 
Choose the programs you want to install: 
‘Mv ‘eal Expression Web 3 


ica nel Expression Blend 3 + SketchFlow 


'] -" Expression Design 3 
i [] | Expression Encoder 3 


> Options 


Te oe 


A streamlined setup experience. 


The setup experience combined with the first use of the program is known as the first experience. Your program 
should provide a streamlined first experience for users. Each question or step that isn't necessary or could be 
postponed delays them from using your program. Overly complex setup programs are relics from a different age. 


Note: Guidelines related to the first experience using a program, wizards, and the Start menu are presented in 
separate articles. 
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Is this the right user interface? 


While all Microsoft ®@W indows®programs need some sort of setup program, you have a choice of where to put 
program settings: 


- Setup 

- First use of the program 

- Centralized program options 

- Inthe context of using the feature 


Setup 
Present settings in setup if: 


- The correct settings are required to use the program, and they apply to all users. 


- Using default settings isn't acceptable, either because there is no safe default, users are likely to choose settings that aren't the 
default, or the default settings require user consent. 


- Users should, but aren't likely to, change important settings after setup. 
First use of the program 
Present settings on the program's first use if: 


- The correct settings are required to use the program, and they apply to individual users. 


- Using default settings isn't acceptable, either because there is no safe default, users are likely to choose settings that aren't the 
default, or the default settings require user consent. 


- Users should, but aren't likely to, change important settings using the program options. 
- The settings customize a core experience, or one that is crucial to a user's personal identification with the program. 


For such settings, users are likely to make better choices within the context of the program than within setup. 
Centralized program options 
Present settings on the program's options dialog box if all of the following conditions apply: 


- There are default settings that work well for most users. 
- There are many settings and they apply across features and tasks. 
- Users are more likely to expect to find the settings in a centralized location. 


In the context of using the feature 
Present settings in the relevant context if all of the following conditions apply: 


- There are default settings that work well for most users. 

- There is a small number of self-contained settings for a specific feature. 

- Users are more likely to expect to find the settings with the associated feature than a centralized location. 
- There is an obvious place in the user interface (UI) to access the settings. 


Through careful attention to the placement of configuration settings, you can reduce the burden on users during 
their first experience with your program. 


Design concepts 
Design a lightweight setup 


Welcome, next, next, next, next, next, install, finish, congratulations! Does this setup experience sound familiar? 
Historically, setup programs have adopted this kind of inefficient design: a long sequence of screens, inviting 


users into a mindless sequence of clicks just to get through it. 
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If users describe the setup of your program with words like quick and simple, they are surely praising the 
experience. They would much rather be using your program than setting it up. 


Review your setup design for nonessential questions, options, pages, and paths, and be ruthless about 
eliminating them. Perform user research to find out what options users really need, and make sure they aren't 
mindlessly clicking the Next button through all the pages. Defer any options or questions that are better 
addressed in the context of the running program. 


Many setup programs offer standard pages not because they are necessary or helpful, but because they are 
standard. For example, welcome pages, summary pages, and congratulations pages often just add clicks. Instead, 
your setup program should add pages only if they are necessary to complete the setup task. For guidelines about 
types of setup pages and how to evaluate them, see Page types later in this article. 


ProClarity Analytics Server 6.3 Installation 


ProClarity Analytics Server 6.3 Installation 


Refer to the Setup Guide for software requirements, installation 
instructions, and deployment guidelines. 


View Setup Guide (Adobe Acrobat document) 


By clicking “Next” you accept this license agreement: 


SOFTWARE LICENSE TERMS 

PROCLARITY ANALYTICS PLATFORM 6.3 

These license terms are an agreement between 
ProClarity Corporation (or based on where you live, one 
of its affiliates) and you. Please read them. They apply 
to the software named above, which includes the media 
on which you received it, if any. The terms also apply 
to any ProClarity 


| _Next> | Cancel | 


In this example, the setup program eliminates the traditional Welcome page and gets right down to business. 


While it might be necessary to offer different branches of setup (a speedy, typical experience and a more 
controllable, custom experience), make sure that you have enough custom options to warrant the extra 
complexity. Don't add branches unless you have to. A few unimportant options in a custom branch suggests the 
need to reorganize the setup design. 


Another reason to streamline setup is that inexperienced users sometimes overanalyze options, fearing that a 
wrong choice could be irreversible or destructive. Forcing users to make decisions about things they don't 
understand or care about can make them feel anxious, incompetent, and even frustrated. Not a good first 
impression. It is better just to get them going quickly, feeling comfortable and confident as they explore the 
features in your program, and making better decisions about feature options at that time. For more guidelines, 
see Streamlining setup later in this article. 


Strive to make your setup experience as simple as possible, but not simpler. Programs targeted at highly 
technical users may need a complex setup. For example, the M icrosoft SQL Server®team discovered that 
database administrators prefer to retain control over many setup options, such as file locations. Moreover, SQL 
Server is a large business application, with anumber of components that differ widely in purpose and 
functionality. So while we want to keep things simple, setup needs to reflect the complexity of the product and 
the expectations and needs of its users. 


Still, such complex setup programs should be the exception, not the rule. Most Windows programs should strive 
to start the setup process with a simple, single step. 
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Setup phases 


Well-designed setup programs let users perform other activities during the time-consuming task of downloading 
and copying files. To run unattended, setup programs are designed to have four separate phases: 


- The decision phase. Users indicate how they want the program installed and configured. 


- The downloading phase. For programs downloaded from the Internet. If the program has multiple applications or versions, 


users indicate what to download during the decision phase. 


- The installation phase. The setup program copies the files and makes the appropriate configuration changes. 


- The completion phase. Any remaining details, steps, or problems are addressed. 


Because the installation phase might take a long time, this phase should be designed to run to completion 
without any user involvement. This means that all questions should be asked during the decision phase, and any 
problems that arise should be queued and dealt with in the completion phase. If the installation phase takes 
more than one minute to complete, assume that users will be doing something else during the download and 
installation phases. 


Incorrect: 


Fabrikam Data Services 


Fabrikam Data Services 


Do you want to install auto-reporting? 


Installing Fabrikam Data § 
Auto-reporting is an optional feature of Fabrikam Data 


This might take several minutes. Services. 


40% 


In this example, the setup program interrupts progress to ask a question that should have been asked during the 
decision phase. 


Present helpful progress 


If users patiently wait through the installation phase of the setup experience, perhaps watching a progress bar to 
its apparent completion, only to witness the progress bar reset and start over, there's a real sense of betrayal. 
The reported progress was misleading and ultimately meaningless. 


A variation on this painful scenario is the "brinksmanship" installation: users see progress reach, say, 99 percent 
complete, yet are forced to wait for a disproportionate amount of time before finally getting to 100 percent 
complete. So in terms of what is most important to the user, an implied promise about the amount of time to 
wait, the claim of 99 percent complete is deceptive. 


During the downloading and installation phases, users typically have two things they want to know: should they 
wait or do something else, and is the setup going to be done soon. While there are enough variables in the setup 
process to prevent you from providing perfectly accurate progress information, the progress feedback needs to 
be accurate enough to answer these two questions and set appropriate expectations. In addition to a progress 
bar, you can include a brief statement about the overall time expected for the process. 
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2 Windows Live Installer 


* Windows Live 


You're installing these programs. 
As each item finishes, you can start using it while the others continue to install. 


¥ Installed Start Messenger Done 
*: Installing Writer j 
100% downloaded Sign-in Assistant 


i Installation may take a few minutes. Feel free to do other things while you wait. 


Select any additional products you want to install. 


L] Mail (15 MB) - Access all your e-mail accounts in one place 
__| Toolbar (5 MB) - Search from any Web page 


|_| Photo Gallery (13 MB) - Easily organize, edit, and share your photos and videos 


__| Family Safety (3 MB) - Help keep your family safe online 


Learn more about these products 


In this example, the progress page includes a brief, general statement about how much time the installation could 
take. 


Good setup programs use progress bars effectively to provide users with helpful information about the setup 
program's progress. For more guidelines, see Progress Bars. 


Design for all setup scenarios 
Modern setup programs must be designed to handle a variety of installation scenarios: 


- The user of the program is installing it from a disc or network file share. 

- The user of the program is downloading it from the Web. 

- An original equipment manufacturer (OEM) is including the program on the computer at the factory. 
- An IT professional is installing the program on many computers across an organization. 


- Someone other than the user is installing the program (for example, a parent on behalf of a child, or a co-worker who is using the 
same computer as another co-worker). 


Given these scenarios, you shouldn't assume that users are always installing the program for themselves (making 
options about personal preferences inappropriate), going to be monitoring the process closely (making 
unattended setup important), or even want a graphical user interface for the task. 


Don't forget the uninstall experience 


To complete the software setup lifecycle, users need to be able to remove software they don't want or no longer 
need. This is especially important if they didn't install the program themselves (for example, if it came pre-loaded 
on the computer). 


Handle technical support strategically 
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Installing your program is the one task that all your users must complete successfully. If users fail to install your 
program, either you need to provide them with costly technical support or they aren't your users anymore. 


Design your setup program to provide your technical support team with the features and information they need 
to help users install successfully. These details shouldn't normally be exposed to users, but they should be readily 
accessible when needed. 


Incorrect: 


Status: 
Registering COM server {098f2470-bae0-11cd-b579-08002b30bfeb} 


wr aj 


In this example, the progress bar is showing details meaningful only to technical support. 


Keep the normal user experience simple—don't clutter it with information that has value only to technical 
support. Rather, record support information in a setup log file instead. And more importantly, help users avoid 
the need for technical support with clear, concise error messages that explain problems well and provide 
practical solutions. Provide links to Help articles when necessary. Consider providing a Repair option to your 
setup program to repair missing or corrupted files or settings. 


If you do only three things... 

1. Make setup as simple and lightweight as possible. Remember that users don't enjoy setup, they endure it. 
Look carefully at every question, option, page, and path, and trim away everything that isn't essential to 
completing setup. 

2. Design for all setup scenarios, including unattended installations, scripted installations, and uninstall. For 
efficient unattended installations, make sure there is a clean separation between the setup phases. 

3. Design your setup program so that users can resolve setup problems on their own, but also log the 
information needed for technical support just in case. Keep in mind that setup is the one task that all users must 
complete successfully. 


Guidelines 
General 


- Apply the standard wizard guidelines for wizard-based setup programs. Use these guidelines to determine good page design, 
effective navigation, good control labels, use of main instructions, and use of help. 


- Allow users to restart the setup program where they left off if it requires a lot of user input or takes a long time to complete. If 
users restart the program after closing it before completion, restore previous user input, and restart where the setup was stopped. 


- Don't display setup windows maximized. Displaying a setup window maximized presumes that users will give setup their 
undivided attention, which is unlikely. Instead, choose a size that is appropriate for the content to maintain a simple appearance. 


Windows integration 


- Name the setup file "Setup.exe". "Install.exe" is an acceptable alternative. This enables Windows (and users) to recognize the file as 
a setup program. 
o Exception: For programs downloaded from the Internet, help users manage and organize their Downloads folder by including the 
name of the program in the name of the setup file. For example, SetupVisualStudioExpress2008.exe. 


- Copy program files to the proper file system locations. Doing so allows users and Windows to find and organize the files better. 
For more information, see the Windows File System Namespace Usage Guidelines. 


User Account Control 


- Digitally sign the setup executable file. Signed executables have many advantages, including using a more specific User Account 
Control Elevation UI. For information about signing files, see Introduction to Code Signing. 


- Ifasetup might require elevation, elevate as late as possible. Display the elevation UI only after the user has committed to an 
option that requires elevation. Usually, the elevation Ul appears during the installation phase, not the decision phase. However, if 
a setup always requires elevation, elevate at its entry point. 


Always require elevation for uninstall. Doing so prevents malware from uninstalling critical software without users knowing about it. 
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- Once elevated, stay elevated until elevated privileges are no longer necessary. Users shouldn't have to elevate multiple times 
to perform complete a program installation. 


- If special privileges are required for installation, verify the user's credentials and report any problems on the first or second 
page. Don't let users perform a lot of work only to find that they don't have the right credentials to complete the installation. 


- Require the least privileges possible. For example, administrators are reluctant to install software that requires domain 
administrator credentials. 


For more guidelines, see User Account Control. 
Restarting Windows 


- Avoid restarting Windows. M ost programs should install without restarting Windows. The primary reason program installations 
or updates require a system restart is that some of the files involved are currently being used by arunning program. In this case, 
a better alternative is to make users aware of the situation, allow users to close these programs, and retry the action. For 
more information about avoiding restarts, see Restart M anager. 
- If your setup must restart Windows: 
o Usea single restart. Delay the restart required by any prerequisites until the program and its updates are completely installed. 


o Let users determine when it happens. Don't restart Windows automatically, because users may lose work. Make sure that it's clear 
to users that they have a choice. 


Incorrect: 


Fabrikam Data Services 


Fabrikam Data Services 


To use Fabrikam Data Services, you must 
Installing Fabrikam Data S}| restart Windows 


This might take several minutes. Before restarting, save any open files and close all programs. 


100% 


In this example, users don't appear to have a choice about when to restart Windows. 


o If the user chooses to not restart Windows immediately, present any final feedback as a success, not a failure. While technically 
the installation isn't complete until restart, it was successful from the user's point of view. See Error pages for an example. 


Streamlining setup 


- Whenever practical, start the installation process with a single step. For example, instead of adding a separate page in setup for 
the license terms, you may provide a link to them instead. If you link to the terms: 
o Phrase the commit button as "Agree and install" to require explicit consent to accept the license terms. 


o Ensure that the license agreement link cannot be broken by linking to a file local to the setup instead of a Web page. 
o Provide the ability to print the license agreement from its display window. 


- Eliminate unnecessary options and questions. 
o Postpone options that are more appropriate for the first use of the program or feature. 
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Choose the initial settings for Windows Media Player. You can change these settings in the Player later. 


( Recommended settings 
Make Windows Media Player the default program for playing media, automatically download 
usage rights and media information to update your media files, and send usage data from the 


Player to Microsoft. Set Media Guide as my active online store. 


(@ Custom settings 
Customize privacy, playback, and online store settings. 


Usage data will be sent to Microsoft if you use recommended settings, but the information will not be used to 
identify or contact you. 


To learn more about Recommended settings, read the Privacy Statement online. 


In this example, Windows M edia Player presents per-user privacy options on first use of the program. 


o Don't ask users questions about the system state. Detect this information automatically instead, and ask users to verify only if there 
is a reason to change. 


o Don't ask questions about unimportant details. For example, for typical Windows programs it is safe to assume that you should 
copy program files to the Program Files folder. 


Incorrect: 


© 2010, Microsoft Corporation. All rights reserved. Page 715 of 882 


is Microsoft MapPoint North America 2006 Setup 


The Installation Wizard will install Microsoft MapPoint North America 2006 in the 
installation folder specified below. 


To install MapPoint 2006 in this folder, click Next. 


To install MapPoint 2006 in a different folder, click Browse, or type a 
new installation folder name in the box below. 


Install Microsoft MapPoint North America 2006 to: 


:\Program Files\Microsoft MapPoint\ 


In this example, setup should be streamlined by eliminating the request for file location input. Given the program's 
size, most users don't care, and simply click Next. 


o Don't ask permission to do what you shouldn't do anyway. For example, most programs shouldn't include an option to put the 
program icon on the desktop. 


o Don't confirm setup cancellation. If users click Cancel during setup, assume the cancellation was intentional and close the program 
without confirmation. If doing so risks losing significant time or effort, allow users to restart your setup program and pick up where 
they left off. 


- Optimize for unattended installation. 
o Present all options and questions during the decision phase. 


o For the download and installation phases, delay requiring user input to any problems encountered until the end of the phase. By 
doing so, users can leave the installation unattended until they return at their convenience. 


- Eliminate unnecessary pages. If most users always just click Next on a page, consider getting rid of the page. For guidelines 
about eliminating certain types of pages, see Page types. 


- Eliminate unnecessary text. 
o Remove redundant text from instructions and labels. 


o Don't explain basic Windows usage concepts, such as: 
= How to interact with controls (examples: To begin, click Next; For more options, click Options; For more information, click 
Help). 


= How wizards work (example: If you want to review or change any settings, click Back). 
= How setup works (example: This program will copy the program files to your hard disk...). 


- Eliminate unnecessary effort. 
o Provide good default values: 
= Generally, select the most secure and private response to be the default. 


a If safety and privacy aren't factors, select the most likely or convenient response. 
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j#! Microsoft MapPoint Europe 2009 Setup _. 


In this example, the user name and organization provided by default are obtained from the registry. 


= If an option is strongly recommended, consider selecting it by default, or adding "(recommended)" to its label. 


o Advance pages automatically when a page has no input and the task is done successfully, such as with download, installation, 
progress, and updates pages. Once the step is done, stay on these pages only to show problems. 


o When practical, start the program automatically when setup is done, instead of showing a Congratulations or Completion page. 
When setup is run interactively, assume the user is installing your program in order to run it immediately, so running the program is 
the best feedback to show that setup is complete. Automatically running the program isn't practical when the setup installs more 
than one program (for example, a suite consisting of many programs), when setup isn't run interactively, or when the installation 
process isn't complete after setup. 


Page types 
Welcome and Getting Started pages 


- Eliminate Welcome pages. While it's great to feel welcome, users typically just click Next without reading. And because users 
typically skip over these pages without reading, the text does little more than state the obvious, by design. 


Incorrect: 
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yy Microsoft MapPoint North America 2006 Setup 


Welcome! 


The Installation Wizard will quide you through the process of 
installing MapPoint 2006 onto your computer. To start the 
installation process, click Next. 


In this example, there's nothing for the user to do but click Next. 


- Use a Getting Started page only if you must inform users about prerequisites for installing. Such prerequisites include 
installing required software or hardware, performing required system configuration changes and updates, performing a system 
backup to protect against data loss, or obtaining required information that the user isn't likely to have already. 


- Whenever practical, provide the ability to perform the prerequisites directly from the setup program. Users should have to 
perform the steps manually only if there isn't an alternative. 


- Ifa Welcome page or Getting Started page isn't used, include the program name and description on whatever is the first page of 
the Setup program. You can use welcoming language as introductory text as long as the page's purpose is clear. 


License terms pages 


- Write the license terms using clear, concise text. Use plain language. Avoid "legalese." 
- Present using a format that is easy to read and scan. Don't use long passages of uppercase text. 


Incorrect: 


SOFTWARE LICENSE TERMS q 
FABRIKAM DATA SERVICES 

THESE LICENSE TERMS ARE AN AGREEMENT 
BETWEEN FABRIKAM CORPORATION (OR 

BASED ON WHERE YOU LIVE, ONE OF ITS 
AFFILIATES) AND YOU. PLEASE READ THEM. ~ 


In this example, the uppercase text and large font size makes the terms difficult to read, forcing users to scroll 
more than necessary. 


- Require explicit consent to accept the license terms. License acceptance should never be selected by default. If radio buttons are 
used to indicate acceptance, leave the options cleared by default and require users to accept the terms before enabling the Next button. 
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ie System Center Operations Manager 2007 Setup 


License Terms 


You must accept the license terms before you can install or use the software. If you do 
Notaccept the license terms, installation will not proceed. You may print the license 
terms by clicking the Print button below. After installation, the license terms are on the 
installation CD in a file named license.txt, inthe same directory as setup.exe. You may 
also view the license terms at http://www.microsoft.com/useterms. 


SOFTWARE LICENSE TERMS 
MICROSOFT SYSTEM CENTER OPERATIONS MANAGER 2007 
These license terms are an agreement between Microsoft Corporation (or 
based on where you live, one of its affiliates) and you. Please read them. 
They apply to the software named above, which includes the media on which 
you received it, if any. The terms also apply to any Microsoft 

* updates, 
( Laccept the terms in the license agreement 
( [donot accept the terms in the license agreement 


Print license terms... | < Back | ty | f 


In this example, the Next button is disabled until users have explicitly accepted the license terms. 


- Don't require users to scroll to the bottom of the license terms text before the Next button is enabled. This imposes an 
unnecessary burden on users to understand why the Next button is disabled. 


- Provide a Print command, either with a command button or a context menu. Present the terms in a format optimized for printing. 


Product registration pages 


- Require users to register only if they must in order to use the program. Clearly explain why users must register. 


- Provide optional registration only if there is a clear user benefit, such as to notify users of product updates. Leave this option 
cleared by default. 


- Allow users to register later. Provide a maximum of three reminders and allow users to dismiss the reminders with a single click. 
Scope pages (typical, custom, or minimum) 


- Prefer to eliminate this page. Assume that most users want the typical setup experience (and design that experience so that it 
works well for most users). 


- If you must include a scope page: 
o Explain the differences among options in terms of functionality and disk space. Users rely on the clarity of information on the 
scope page to ensure that they make the right choice. 


o Make sure that the custom options are necessary only for a small percentage of users, while most users can safely ignore them. If 
not, the options should be in the typical setup path. 


o If users choose custom options, have the typical installation options selected by default. Users regard the typical installation as 
the baseline, and want to customize by adding or removing options from that baseline. 


- If you must use a custom installation option, consider using relative button sizing and placement to guide most users to the 
typical installation. 
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,» 
| ©. } 
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Ce Choose the installation you want 


Please choose your preferred type of Microsoft Office Enterprise 2007 installation below: 


Install Now 


In this example, the page design visually reinforces the fact that most users should opt for the typical installation. 


Input pages 


- Reduce the number of setup options by doing the right thing by default. For ways to eliminate options see Streamlining setup. 


- Provide acceptable default values whenever possible. Choose defaults that are secure and private, and are acceptable to most 
users without change. 


- Unless your program has unusual requirements, strive to have a single page of questions and options. But if your program 
requires several pages of questions and options, display them in the main wizard page flow. Don't try to reduce the number of 
pages technically by putting options in dialog boxes or using tabs. 


4%) Fabrikam Data Services Setup Wizard 


Installation options 
Check any of the following installation options that you'd like. 


[-) Install optional auto-reporting feature 
[| Install optional warehousing feature 


("| Install this program only for my use (not for other users of this computer) 


Place a program shortcut on my desktop 


In this example, options are limited to a single page. 


- Validate input as soon as possible: 
o Prohibit invalid characters on entry. 


o Use balloons to report problems with invalid text boxes. 
o Validate related fields on a page when users click Next. 
o Validate related fields across input pages as soon as problems can be detected. 


- Give all editable file paths a Browse button. Allow users to specify network paths. 
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- For the final input page, label the commit button Install, not Next. Users shouldn't be surprised by when the installation starts. 
Before the commit point, make sure that users can easily change any settings. 


Start installation pages 


- Eliminate this page if it has no purpose other than to summarize the previous choices and begin installation. If the input pages 
are clear and few in number, there should be no need to summarize them. Instead, the final input page should have the Install 
button, leading directly to the progress page. 


- For complex installations targeted at IT professionals, provide an Installation page with a comprehensive list of changes that 
the setup program will perform. Many IT professionals have strict change management control, so they need to know the 
effect installing the program will have in detail. 


Progress pages 
- Always provide a progress page, even if the program installs quickly. Provide a separate progress page for the downloading phase 


if there is one. Disable the Back (or Previous) and Next buttons while the setup is in progress, but leave the Cancel button enabled 
and responsive. 


fe Microsoft MapPoint Europe 2009 Setup 


Please wait while the Installation Wizard installs Microsoft MapPoint Europe 
2009 on your computer. This may take several minutes. 


Copying new files... 
-— 


A typical progress page. 


- Use a single, determinate progress bar. Follow the determinate progress bar guidelines, including: 
o Clearly indicate completion. Don't let a progress bar go to 100 percent unless the operation has completed. 


o Don't restart progress. A progress bar loses its value if it restarts (perhaps because a step in the operation completes) because users 
have no way of knowing when the operation will complete. Instead, have all the steps in the operation share a portion of the 
progress and have the progress bar go to completion once. 


- Provide a concise description of the current step above the progress bar. For quick installations, such text is unnecessary; the 
progress bar alone is sufficient. For installations requiring a minute or longer, text can be helpful for users attending the setup. 
o Use sentence fragments, typically beginning with a verb, and ending with an ellipsis. Examples: Copying files..., Installing required 
components... 


o Place text above the bar, not below. 


Incorrect: 
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ed 
Installing Microsoft Office Enterprise 2007... 


In this example, the explanatory text should appear above the progress bar. 


o Refrain from cluttering the progress page with unnecessary details. This page isn't for technical support, so there's no need to 
display registering GUIDs or specific files copied. 


Incorrect: 


Status: 
775C7 345-367 FR-3759-A82T-C4E6A901FD82 


ed 


In this example, technical details such as GUIDs are meaningless to users. 
Error pages 


- If setup fails with a significant problem, display an error page that explains the problems along with practical steps to resolve 
them. Display the page with an error icon. Don't use a dialog box for this purpose. 


igg Microsoft Commerce Server 2009 Installation Wizard 


Setup has detected that this computer does not meet the requirements to install this update. 
The following blocking issues must be resolved before you can install Microsoft Commerce 
Server 2009 software update. 


Installation Requirements: 


1. You must have Microsoft Commerce Server 2007 components before you can continue with this 


2. You must install .NET Framework 3.5 with SP 1 to continue with this update. 


Please see Microsoft Commerce Server 2009 readme for more information. 


| Continue 


In this example, the setup failure is explained on an error page, along with some steps to resolve the problem. 


- If setup completes with a minor recoverable problem, present the problem as an additional task instead of an error. Use 
positive, success-oriented, encouraging language, not terms like error, failure, or problem. Don't use an error icon. 


Congratulations/ Completion pages 


- When installing a single program interactively, start the program (and close the setup wizard) to indicate successful setup, instead 
of displaying a completion page. Exceptions: 
o Setups that are run from the command line should not start programs. 
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o Automatic updates (for example, Windows Update) shouldn't start programs. 
o Group policy installation shouldn't start programs. 
o AnyIT professional setup scenarios (because they are not installing for their own use). 


- Ifthe setup has follow-up steps after installation, list them on a Completion page. But to justify a Completion page, make sure 
users are likely to perform the steps, and that the steps genuinely need to be stated (that is, they are not obvious). 


Incorrect: 


Wmcoonswanesew 


Completing the Microsoft Student 2009 
Setup Wizard 


You have successfully installed Microsoft Student with Encarta Reference 
Library 2009. Please visit Windows Update to install the lastest security updates 
for your system components. 


In this example, an unnecessary Completion page states the obvious. Windows Update runs automatically, so 
there's no reason for users to run it manually. 


- When installing a suite of programs, display a Completion page to indicate success and any follow-up steps that may be necessary. 


Cis 
Ow 


Microsoft Office Enterprise 2007 has been successfully installed. 


Visit Microsoft Office Online to get free product updates, help, and online services. 


[aaoaromercmnen| 
lee aoe 
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In this example, setup has installed multiple programs, so it doesn't make sense to start one particular program 
automatically. A Completion page is more appropriate. 


Leaving users in control 


- Don't clutter the Start menu with entries for uninstall, readme files, Help files, or links to Web sites. For more guidelines, see 
Start menu. 


Don't gather personal information, such as that used for marketing purposes. Setup isn't an opportunity to push your own 
agenda, cross-sell other program offerings, or conduct market research; you can damage the trust relationship with your users this way. 


Don't force users to opt out of installing optional features. Allow them to opt in instead. For example, users should explicitly choose 
to install a Windows Desktop Gadget. 


- Allow users to add or remove optional features using the setup program after initial setup. Users can perform this task using 
the Uninstall or change a program control panel item. 


- For customer experience improvement initiatives, explain what data is transmitted, how it is used, and how long it is kept. Use a 
link to a privacy statement Help topic for this purpose. 


Avoid using sound, because many installation scenarios are unattended, and because sound can be unnecessarily distracting 
even during attended installations. 


Security 


- For Internet-based setup, provide any security updates automatically during initial setup. Users should not have to update as 
a separate step. 


- Avoid recommending that users turn off firewalls as a prerequisite to installing your program. 


- Ifa firewall must be turned off, do the following: 
o Limit the duration of this condition to as short a time as possible. 


o Explicitly point out when users can turn the firewall back on again. 


Uninstall 


- Uninstall should remove all traces of a program, including the following: 
o Program files, including the setup program. 


o Start menu entries. 

o Desktop icons and Quick Launch icons (if any). 
o Registry settings. 

o File associations. 


- Uninstall should leave behind the following: 
o User created files, such as document files. 


o Shared dynamic-link libraries stored in the System folder. 
Help and support 


- Design your setup program not to need Help by asking clear, self-explanatory questions. Reserve Help for advanced questions 
that really benefit from further explanation. 


- Don't use readme files. These files are now obsolete and users don't read them anyway. Instead, provide online content if needed. 


- Link to appropriate Help topics or troubleshooting content from setup error messages. M ake sure the Help content provides a 
clear path to resolving the problem. For more information, see Error Messages. 


- Create log files to capture information useful to technical support. Don't clutter the setup UI with technical support-related details 
that are meaningless to most users. Use log files for this purpose instead. 


Text 


- Be concise. Setup wizards often overexplain features and options, using blocks of text that are difficult to scan quickly. Exceptions: 
o Spell out all acronyms. Setup is often users' first experience with your program, so don't assume they understand jargon such as 
acronyms. 


o Explain unfamiliar terminology and concepts, preferably in place but using Help topics if necessary. 
- Prefer a friendly, professional tone; avoid an overly-technical tone. 
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Incorrect: 

Restrict installation on a per-user basis. 
Correct: 

Install only for me. 


- Don't use now in command button labels because the immediacy of the command can be taken for granted. 
o Exception: When necessary, use now to differentiate commands that start a task from commands that perform a task immediately. 


Download | 
In this example, clicking the command button goes to a window or page that allows users to download. 
Download now | 


In this example, clicking the command button performs the download immediately. 


Only one command in a task flow should be labeled with now. So, for example, a Download now command 
should never be followed by another Download now command. 


- Use license terms, not license agreement, licensing agreement, end user license agreement, or EULA. 
For more guidelines, see Style and Tone. 
Documentation 


- Asa verb, set up is two words; as an adjective or noun, setup is one word. 

- The Setup program is capitalized and is not hyphenated. 

- Use install to refer to adding hardware or software to a computer system. 

- Don't use install as a noun. Use installation instead. 

- Use restart, not reboot. Indicate that it is the computer, not a program, that is restarting. 
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First Experience 


In the ideal first experience, users install your program and use it productively immediatelya€”without answering 
a bunch of questions or learning a bunch of things. 


Is this the right user interface? 
Design concepts 
Guidelines 

General 

Presentation 

Settings 

Tasks 


A first experience user interface helps users transition from their first exposure to a new program or feature to 
everyday usage. 


For Windows®programs, the initial first experience occurs when users run the Setup program. Setup programs 
typically: 


- Require the user to accept an End User License Agreement (EULA). 

- Ask for a product key. 

- Present required configuration-related options, including installation of optional software. 
- Copy the software to the user's hard disk. 

- Present program options that apply to all users. 


Type your product key for activation 


You can find your product key on your computer or on the installation disc holder inside the 
Windows package. Although you are not required to enter your product key now to install, failure 
to enter it may result in the loss of data, information, and programs. You may be required to 
purchase another edition of Windows Vista. We strongly advise that you enter your product 
identification key now. 


The product key sticker looks like this: 


Product key (dashes will be added automatically): 


ewer 


J¥ Automatically activate Windows when I'm online 


What is activation? 


Read our privacy statement 


Part of a typical M icrosoft®Windows®setup experience. 
The first experience then continues to the first use of the program or feature. This first use experience can: 


- Present program options that apply only to the current user. 
- Offer product or feature tutorials. 
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Ere! 
a 
GvU- WW > Control Panel » Welcome Center y | #4] | Search Pp 


Ure} Jonathan 
Windo ista™ Ultimate +> Show more details 
= m 4 CPU 3.60GHz 
| ; 2.0 ( A 


> RAM 


Jonathan 
vs Experience Index §By5 


1. Get started with Windows (13) 


7 View computer details rat Transfer files and settings “Sp Connect to the Internet 
y Windows Ultimate Extras 3 | What's new in Windows Vista m Personalize Windows 


Show all 13 items... 


Run at startup (Welcome Center can be found in Control Panel, System and Maintenance) 


The first use experience. 


Note: Guidelines related to program options are presented in a separate article. 


Is this the right user interface? 

To decide, consider the following questions. 
Setup experience 

Do the following conditions apply? 


- The correct settings are required to use the program, and they apply to all users. 

- The settings customize a core experience, or one that is crucial to the user's personal identification with the program. 

- There is no safe default, the user is likely to choose settings that aren't the default, or the default settings require user consent. 
- The user is unlikely to change settings after setup. 

« Changing the settings requires elevation. 


If so, consider presenting the settings during the setup experience. 
First use experience 
Do the following conditions apply? 


- The correct settings or tasks are required to use the program or feature, and they apply to individual users. 

- The settings customize a core experience, or one that is crucial to the user's personal identification with the program. 

« There is no safe default, the user is likely to choose settings that aren't the default, or the default settings require user consent. 
« Users are likely to make better choices within the context of the program than within setup. 

- The user is unlikely to change settings using Options. 


If so, consider presenting the tasks and settings during the first use experience of the program or feature. 
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Design concepts 


In the ideal first experience, users install your program (or even just start it if it doesn't require installation) and 
use it productively immediately—without answering a bunch of questions or learning a bunch of things. 


This ideal is obtainable for most programs, so you should strive for this ideal experience whenever you can. 
However, this goal is often not obtainable for programs that require significant system integration, have many 
optional features, or have privacy implications. For example, if your program has features that might reveal 
personal information to untrusted parties, the tenets of trustworthy computing require that you obtain user 
consent before enabling these features. 


Questions aren't choices 


Questions require responses—they must be answered before users can proceed. Questions during the first 
experience are hurdles that users must jump over before they can use your program productively. By contrast, 
choices are optional. Users don't have to respond to them, or can choose to see them only when they want to. 


Thus, settings presented in the main flow of a setup wizard are questions, whereas settings outside the main 
setup flow or in a program options dialog box are choices. Unnecessary questions make your program's first 
experience cumbersome and long, effectively eliminating the positive anticipation and excitement users have 
about getting started with your program. 


Use the first experience when you must 


Present settings and tasks to users during the first experiences when you must, but usually there are better 
alternatives: 


| First experience [Alternatives 


Setup questions Select appropriate defaults. 
Allow users to change from program options. 


Provide typical vs. custom setup paths. 


[First use questions [Select appropriate defaults, and allow users to change from program options. 


[First use tasks [Present contextually instead. 


[First use feature advertisements [M ake the most common and important tasks discoverable and contextual. 


First use tutorials Make program features self-explanatory. 


[Product registration [Provide command in Help menu and About box. 


If you do only one thing... 
Keep your first experience as simple as possible. Get your program working right away. Choose safe, secure, 
convenient defaults and ask questions during setup and first use only when you must. 


You have only one chance to make a good first impression and that first impression is lasting. 
Guidelines 
General 


- Limit first experiences to tasks and settings required to use a program or feature, and only include these when there is no 
better alternative. See the previous table for alternatives. 
o Exception: Add personalization or program customization settings to the first experience if their customization is part of the 
core experience or crucial to the user's personal identification with the program. 


© 2010, Microsoft Corporation. All rights reserved. Page 728 of 882 


Type a computer name and choose a desktop background 


Type a computer name (for example, Office-PC): 
Jonathan 


Choose a desktop background (you can make changes later in Control Panel): 


Windows asks users for the computer name and choice of background during setup because these settings help 
form an emotional connection to the product. 


- Use the setup experience for tasks and settings if they apply to all users or changing settings requires elevation. 
- Use the first use experience for tasks and settings if they apply to individual users. 


Presentation 


- Prefer optional tasks and settings to required tasks and settings. Avoid forcing users to configure your program. 


[5"] Found New Hardware 


Windows needs to install driver software for your Fabrikam 


© Locate and install driver software (recommended) 


Windows will guide you through the process of installing driver software 
for your device. 


> Ask me again later 
Windows will ask again the next time you plug in your device or log on. 


© Don’t show this message again for this device 
Your device will not function until you install driver software. 


The Found New Hardware dialog box makes it optional to install driver software instead of making it a required 
task. 


- Take optional tasks and settings out of the main task flow whenever practical. For example, many setup programs provide a 
custom installation path to remove infrequently changed settings from the main task flow. 
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Setup Type 
Select a setup type. 


©) Full (Recommended) 
Installs all documentation to the local hard drive. 

@ Custom 
Lets you choose the installation location and specify which 
content to install. 


A setup experience that facilitates main task flow if the user does not intend to customize the installation. 


- Don't overwhelm users with tasks and settings: 


o Start simple. Begin with simple, personalization settings and progress towards more complex, technical tasks and settings. For 
example, Windows setup starts with personal information and ends with network configuration. 


o Use a contextual first experience for tasks and settings if they apply only to features that aren't fundamental to the main program. 


Audio and Video Setup 


Select the speakers or headset you would like to use: 


Headphones (High definition audio device) a 


|] Click here if you are using headphones 
Note: If you are hearing an echo, uncheck this box. 


ff you are having trouble, check the speakers or headset 
to make sure they are plugged in, tumed on, and 
adjusted to the proper volume. 


Windows Live Messenger has a contextual setup for audio and video because they are used by secondary features. 


o Don't present everything all at once. Consolidate to use a single UI instead of multiple UI surfaces, or display tasks at different 
times instead of all at once. 


Incorrect: 
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(@® Welcome to Fabrikam Pro - Setup Wizard 


© Welcome to Fabrikam Pro 


Completed 


completely installed. 
(a) Welcome to Fabrikam Pro 


Would you like to see if there any current updates 
available? 


Would you like to make Fabrikam.com your homepage? 


) Did you know? 


Allimages can be opened by double clicking on them. 


Show this dialog box next time 


Cancel 


In this example, the first use experience is overwhelming. 


- Express questions and options in terms of users' goals and tasks, not in terms of technology. Provide options that users 
understand and clearly differentiate. M ake sure to provide enough information for users to make informed decisions. 


- If the need for personal information isn't obvious, explain why your program needs the information and how it will be used. 


Your information 


Name: 


Email address: 


We will use your email address only if there ts a 
problem with your order. 


In this example, an e-commerce application explains how personal information will be used. 


- Present first experiences full screen only if users can't productively perform other tasks. For example, Windows setup is presented 
full screen to discourage users from performing other tasks while Windows is being installed. M ost first experiences shouldn't be 
full screen. 


Settings 


- For all settings, select the safest (to prevent loss of data or system access), most secure and private value by default. If safety 
and security aren't factors, select the most likely or convenient value. Choosing good defaults is an effective way to simplify the 
first experience. 


- Require users to opt in for: 
o Settings with legal implications, such as end user licensing agreements (EULAs). Such settings can't have default selections. 


o Features that perform automatic system configuration changes, such as Windows automatic updates. 

o Features that reveal personally identifiable information (PII) or system information. 

o Changes to the user's desktop beyond adding entries to the Start menu, such as adding icons to the desktop or quick launch bar. 
o Optional software, such as product enhancements, subscriptions, and third-party products. 
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Choose the features and settings you want. 


|__| Windows Live Messenger shortcuts 
Add Windows Live Messenger icons to the desktop and Quick Launch toolbar. 


Windows Live Sign-in Assistant 
See all your Windows Live ID accounts at sign-in with Internet Explorer. 


'|MSN Home 
Change the home page in Internet Explorer to MSN Home. 


Windows Live Toolbar 
Search from any Web page with powerful protection. 


In this example, users opt in to product enhancements, subscriptions, and third-party products. 


- Ifasetting is strongly recommended, add "(recommended)" to the label. For radio buttons and check boxes, be sure to add to 
the control label, not the supplemental notes. 


- Ifasetting is intended only for advanced users, add "(advanced)" to the label. For radio buttons and check boxes, be sure to add 
to the control label, not the supplemental notes. 


Tasks 


- Help users pass waiting time productively. 
o If the waiting time is typically between one and two minutes, consider providing helpful information while users are waiting, such as 
a presentation of what is new during setup. 
o If the waiting time is typically longer than two minutes, make it easy for users to perform other tasks. Display the estimated wait 
time, recommend that users do something else in the meantime, and make task completion obvious by changing the screen significantly. 
- Reconsider presenting tutorials during the first experience. M ost likely users want to use your program right away and are 
interested in tutorials at a later point. 
- Don't use feature advertisement notifications in the first experience. Instead of using a feature advertisement notification, design 
the feature to be easier to discover in contexts where it is needed, or don't do anything special and let users discover the feature 
on their own. 


- Don't use any notifications during the initial Windows experience. To improve its first experience, Windows 7 suppresses 
all notifications displayed during the first few hours of usage. Design your program assuming users won't see any such notifications. 
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Printing 


Printing is the user experience on paper. It's easy to overlook, but it is an important part of the overall user 
experience. 


Is this the right user interface? 
Design concepts 
Printing patterns 
Guidelines 
General 
Formatting pages 
Oversized objects 
Headers and footers 
Print commands 
Print options 
Print previews 
Printing errors 
Text 
Documentation 


In this article, printing refers to the user experience on paper, where output is directed to paper instead of the 
screen display. Printer-friendly format refers to modifications the program can make to screen display output that 
make it more suitable for paper output. 


Despite the prediction that computing would result in the "paperless office," surprisingly enough we print now as 
much as ever. We distribute hard copies of Microsoft ®PowerPoint ®presentation decks, we print articles we 
discover online but wish to research more carefully later, we print important e-mails or resumes we have 
received in electronic form, and so on. While it's easy to overlook printing when designing a user interface, 
remember that printing is an important part of the overall user experience. 


Note: Guidelines related to common dialogs are presented in a separate article. 


Is this the right user interface? 
To decide if your program needs to support printing, consider these questions: 


- What type of program are you designing? The program type is a good indicator of the appropriate level of printing support. 
Document and image creation, viewing, and browsing programs need excellent printing support, whereas other types of 
programs may only need printing support to a lesser degree. (For a list of program types, see the Printing patterns section of this 
article.) 


- Isthe program used in scenarios that benefit from direct paper output? If so, it's more convenient to add printing support to 
your program than to require users to copy the data to another program to print. 


Design concepts 
Design your program to eliminate unnecessary printing 


There are many reasons why users need to print—some which are good, some which are less so. Users should 
print because they want to, not because they must. Requiring users to print can be a sign of missing features. For 
example, in the past users had to print documents in order to make comments and suggest revisions, but now 
users can do these tasks directly within Microsoft Word documents. Review your program's scenarios that 
involve printing, and to the best extent possible, make sure that the need to print is optional and not the result 
of missing features. 


It's also worth remembering that conserving resources like paper and ink is helpful environmentally and saves 
organizations money in the long run. 
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Understand the differences between screen display and print 


While there are many similarities between display output and printing, there are many differences as well. Print 
output: 


Has a high dpi. Display output is usually at 96 or 120 dots per inch (dpi), whereas printer output is usually at 600 dpi or greater. 


Has different optimal fonts. While well-designed fonts work well for both display and print, serif fonts are more readable at high 
resolutions for large amounts of text than sans serif fonts. Thus, large amounts of text primarily intended for print should use a 
serif font, whereas text primarily intended for display should use a sans serif font. For more information, see Fonts (Segoe Ul). 


Has aspect ratio. Display usually has a low aspect ratio (4:3 or 5:4), whereas print uses a high aspect ratio (8.5:11 or 1:1.4142 
based on the standard page sizes). This is because portrait mode printing is more common than landscape mode. 


Has pages. Consequently, print output: 
Has standard page sizes. The standard in the United States and Canada is 8.5"x11" paper; the standard everywhere else is 
A4 paper. 


c 


Oo 


Has page breaks. 


ie) 


Has page margins. 


eo) 


Has headers and footers. 


eo) 


Has single- or double-sided output. 


ie) 


May have multiple copies. 


° 


c 


1} 


May be printed out of order or selectively. 


Has many options. Users may want to choose a printer and paper size, printer options (such as print quality, double-sided 
printing, and stapling), number of copies, page ranges, collation, and print format. 


Takes time and money. It can take a significant amount of time to print a large document or a high-quality photo, and the cost of 
the paper and ink adds up over time. By contrast, display output is instantaneous and essentially free. 


May be black and white. M any printers today are black and white, whereas few displays are monochrome. 


Is not interactive. Users can't scroll pages or controls to see more content. They can't click links or buttons, or hover over 
controls. Interactive content has no value when printed. 


Can run out of paper, ink, or toner, or be offline. Consequently, paper output needs more error handling and troubleshooting. 


These differences may affect your printing design. Creating a good print experience requires more than just 
directing your program's output to the printer. 


WYSIWYG and the evolving requirements of screen display 


Historically, the most fundamental principle for the printing user experience is known as WYSIWYG ("what you 
see is what you get"). This principle suggests that there should be a strong relationship between what is seen on 
the display and what is printed. Before WYSIWYG became a standard practice, there was often no relationship 
between the display and print versions of a document. Users had to print in order to see what the document 
really looked like on paper. Using WYSIWYG was a great improvement in productivity because most programs at 
the time were primarily designed for document creation and printing. 


Today, it is common for Web sites to optimize for the display, and their printer-friendly format may appear much 
different. Furthermore, we have diverse computing devices (for example, smart phones and personal digital 
assistants) that often need output optimized for small displays. While WYSIWYG is still the best approach for 
document creation programs, for other programs it often makes more sense to optimize for a variety of target 
devices. For such programs, what you see on a PC display may be different from what you see on other device 
displays, which may be different from what you get on the printed page. 


Optimize for printing 


Programs that don't employ a strict WYSIWYG print experience can still optimize for printing in the following 
ways: 


- Reformat the layout for the target page size. 
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- Provide print preview, preferably with easy customization options allowing users to experiment directly in the print dialog (for 
example, dragging margins). 


- lf appropriate, provide a printer-friendly format option. 
o Consolidate separate partial documents into a single document. 


o Remove backgrounds and other design elements such as ads, especially if they are unsuitable for a black and white 
printer. 


o Remove interactive elements, such as navigation controls and command buttons. 
o Make sure that all data is visible without scrollbars or hovering. 


Display version: 


é@ Business trip budget - Windows Internet Explorer 


‘€) © ~ | heterousiness trp bud. [ http://business trip bud... +4 oE x | | Live Search 


Business Trip Budget 


Target trip budget ¢ 1,900.00 
Total cost of tickets tecket(s) 

e  techet(s) 

tecket(s) 
night(s) 
_ Pagha(s) 
__ fagha(s) 


Cost per night 
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Total cost of the trip 


You're under budget by EE 3 


Browse 


= Agendas = Faxes = Newsletters 
= Award certificates = Flyers = Plans 

= Brochures = Forms = Planners 

= Budgets = Gift certificates = Postcards 


- vr 
» More ratennriesc 


ee r 


@ Internet | Protected Mode: Off 100% » | 


Printer-friendly version: 
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In the printer-friendly version, all the data is visible on the printed page, and the interactive elements are removed. 
o Replace links with their text equivalent. 


Acceptable: 
For more information, see UX Guide. 


Optimized for printing: 
For more information, see UX Guide (http://msdn.microsoft.com/windowsvista/uxguide). 


- Convert light text on a dark background to dark text on a white background. 
Include the right print options 
The Print options common dialog provides options to: 


- Select the printer and paper size. 

- Set printer properties. 

- Select the page range, number of copies, and collation. 
- Use both sides of the paper. 
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Your program may require additional options, such as document content options (which content to print), format 
options (how to print, including print quality, picture sizes, fitting to frame), and color options. If you need to 
provide additional options, do so by extending the Print options common dialog. Don't create a custom Print 
dialog box. 


When designing the Print options, consider the experience when printing multiple documents. Chances are the 
next print job will be very similar to the last print job. Optimize the default settings for reprints and similar print 
jobs—don't make users start over completely each time. 


Design print preview for performance and usability 


An incorrect print job wastes time and money. For document creation programs, users should be able to 
evaluate the results before doing the actual printing. A print preview should allow users to: 


- Evaluate margins, page breaks, page orientation, headers, and footers. 
- Browse through all the pages. 
- Print directly from the print preview. 


Some complex documents (such as computer-aided design [CAD] drawings) can take a long time to render. The 
performance of the preview is important—a print preview can become quite tedious if it takes awhile to render 
each page. Consequently, it's better to have a print preview that renders quickly and is accurate enough to 
allow users to evaluate the print results than to have a completely accurate preview that renders slowly. 


When designing the print preview, consider the whole task of preparing to print. What are users going to be 
looking for? What are they going to change? Document creation programs should provide an interactive print 
preview so that users can adjust frequently changed settings like margins and line breaks within the preview. 


However, to the best extent possible, your program should do the right thing by default. When necessary, warn 
about printing situations that are unlikely to be what the user intended. Don't rely on users finding problems 
using the print preview. For example, suppose a spreadsheet has too many columns to print on a single page in 
portrait mode. While the program could present a confirmation dialog box, a better solution is to print in 
landscape mode automatically. 


If you do only five things... 

1. Design a printing experience appropriate for your program type. 

2. Review your program's scenarios that involve printing and to the best extent possible, make the need to print 
optional. 

3. Provide useful printing extensions by customizing the Print common dialog. Don't create a custom Print dialog 
box for this purpose. 

4. Optimize the Print options for reprints and similar print jobs. 

5. Provide a preview feature whenever appropriate. 


Printing patterns 


The type of program is the primary indicator of the appropriate printing experience: 


Advanced document creation User goals: Perfect results—detailed control over the print output. 
Used to create, view, and print high-end Example: Microsoft Word 

documents. The ability to create high- Recommended printing experience: 

quality printouts is one of the main reasons 

why the program exists. Targeted at expert . Output optimized for print (WYSIWYG). 

users. 


- Advanced document formatting features, with options to 
print large objects. 


- Advanced print options, including headers and footers. 
Document-related print options are saved within the 
document itself. 


- Fast, accurate, powerful print previews. 
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Intermediate document creation 

Used to create and view more complex 
documents. The ability to create good- 
quality printouts is important, but not 
necessarily one of the main reasons why 
the program exists. Targeted at 
intermediate users. 


Simple document creation 
Used to create and view simple documents. 
Targeted at all users. 


Document viewers 
Used to view documents. Users can't 
change the document content or format. 


Utilities or line-of-business applications 
Used to perform simple, specific tasks. 
Targeted at all users. 
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User goals: Good results with minimal effort. Some control over 
the print output. 

Examples: M ost Microsoft Office programs, such as Outlook®and 
Excel ® 

Recommended printing experience: 


- Output optimized for print (WYSIWYG). 


- Some document formatting features, with ability to print 
large objects without truncation. 


- Some custom print options, including headers and footers. 
- Accurate, easy to use print previews. 


User goals: Basic printing support with standard printing options. 
Users expect good results without any tweaking. 

Examples: W ordPad, Paint. 

Recommended printing experience: 


- Output may be optimized for print (WYSIWYG), but this is 
not required. 


- Some document formatting features, with ability to print 
large objects without truncation. 


- Standard print options; custom print options are optional. 
- Simple or no print previews. 


User goals: Basic printing support with standard printing options. 
Users expect good results without any tweaking. Printing 
problems are handled automatically because users can't modify 
the document. 

Example: Windows®lnternet Explorer® 

Recommended printing experience: 


Output may be optimized for print (WYSIWYG), but this is 
not required. 


Program automatically handles page breaks, eliminates 
blank pages, handles large objects, and removes 
backgrounds and other design elements. 


Standard print options; custom print options are optional. 


Simple or no print previews. 


User goals: Ability to export selected data efficiently. Users expect 
good results without any tweaking. Often for such programs, 
users are pleasantly surprised to find any printing support at all. 
Recommended printing experience: 


Printing support is optional depending upon supported 
scenarios. 


Output may be optimized for print (WYSIWYG), but this is 
not required. 


Some document formatting features. Might be acceptable 
if large objects are truncated. 


Standard print options. 


Print previews optional. 
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Guidelines 
General 


- Don't print blank pages or pages with just headers and footers. However, print blank pages if the headers or footers contain 
page numbers and those page numbers might referenced elsewhere. 


- Completely spool out any pending print jobs before shutting down a program. 
Formatting pages 


- Reformat text layout to fit within the target page size. Never truncate text. 


- If users don't control the format of the document: 
o Automatically handle large objects by scaling, rotating, or splitting across pages. For more guidelines about printing 
large objects, see Oversized objects. 


o Optimize the page breaks to eliminate blank and nearly blank pages. 
o Convert light text on a dark background to dark text on a white background. 
o Remove backgrounds and other design elements, especially if they are unsuitable for a black and white printer. 


- If your program presents separate partial documents, provide a printer-friendly format option to consolidate them into a 
single document for printing. 


- Remove interactive elements: 
o Remove navigation controls and command buttons. 


o Make sure that all data is visible without scrollbars. 
o Replace links with their text equivalent. 


Acceptable: 
For more information, see UX Guide. 


Optimized for printing: 
For more information, see UX Guide (http://msdn.microsoft.com/windowsvista/uxguide). 


In this example, the link is replaced with its text equivalent in parentheses. 
o Move useful information displayed on hover to inline. 
Oversized objects 


Handling large objects, such as spreadsheets, graphics, and photos, is a problem unique to printing. Choose one 
of the following approaches: 


- Scale the object to fit on the page. This approach works well if the object is only slightly too large to print, keeping the object on 
a single page is important, and the object is still legible when scaled down. 
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| Show Ruler 


In this example, the large image is scaled to fit on the page. 


Close Print 
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- Rotate the page. This approach works well when a few pages print better in landscape mode when in portrait mode (and vice 


versa). 
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In this example, the large image is rotated to fit better on the page. 


- Print the object on several pages. The approach works well when the object can't be scaled, or shouldn't be scaled, and rotating 
the page doesn't help or isn't wanted. If the object has internal boundaries (such as the column and row dividers ina 
spreadsheet), break the pages on these boundaries instead of within the content. Also, repeat any elements required to 
understand the page, such as legends or column headers. When splitting an object on several pages, assign the page numbers in 
reading order (left to right, top to bottom). 
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(Oz) i“) ~ WG ) = Word.docx (Preview) - Microsoft Word 


Print Preview 


Magnifier 
Close Print 
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In this example, the large table is printed on two pages. Column headers persist from page to page to facilitate 
quick comprehension. 


- Truncate the object (printing only the part of the object still visible after truncation). This approach is the simplest solution to 
implement, but likely to be the least acceptable. Also note that truncating is never acceptable for text. 


© 2010, Microsoft Corporation. All rights reserved. Page 742 of 882 


Le} 


Close Print 
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In this example, the large image is truncated. 
Headers and footers 


- Provide headers and footers for advanced and intermediate document creation programs. Consider providing headers and 
footers for other types of programs if they are used for multipage documents. 


- Make headers and footers customizable. Allow users to define the left, center, and right portions. 
o For headers, put the document name on the left side by default. 


o For footers, put the document copyright or source on the left side, and the page number on the right side, by default. 
- Use friendly file path and URLs. Display spaces as spaces, not "%20." 


Print commands 


- For menu bars and shortcut menus, use the Print command that displays the Print options common dialog. Use an ellipsis to 
indicate that additional information is required. 
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[File] Edit View Image Colors Help 


New Ctrl+N 
Open... Ctrl+O 
Save Ctrl+S 
Save As... 

From Scanner or Camera... 


Print Preview 
Page Setup... 


Print... Ctrl+P 


ly 


Send... 


In this example, the Print command has an ellipsis to indicate that it will display the Print options common dialog 
to get more information. 


- For toolbars used with a menu bar, use an immediate Print command. Clicking the button prints a single copy of the document 
to the default printer. Such toolbar commands should be immediate. To indicate that the command is immediate, put the default 
printer in the tooltip. Users can access the full Print command from the menu bar. 


@ Reply to All tak 


Print (Fabrikam Document Writer) (Ctrl+P) 


In this example, the Print command in a toolbar prints immediately instead of displaying the Print options 
common dialog. Putting the default printer in the tooltip provides textual reinforcement that the user is bypassing 
the dialog. 


- For toolbars used without a menu bar, use a Print split button. Clicking the button prints a single copy of the document to the 
default printer. Clicking the arrow portion of the button drops down a menu with full Print, Print preview, and Page setup 
commands. 


Print... Ctrl+P 


Print Preview... 


Page Setup... 


In this example, the Windows Internet Explorer toolbar uses a split button control to provide all the print 
commands. 


- For the ribbon command user interface, put the Print command in the application menu. 
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For ribbons, the Print command is accessed using the application menu. 


Print options 


- Don't create a custom Print options dialog box. If you must provide additional options, extend the Print options common dialog. 
Don't use a Separate dialog for additional print options. 


Incorrect: 


Fabrikam 


Orientation 
(@ Portrait 
a © Landscape 


In this example, Fabrikam incorrectly uses a separate dialog for additional print options. 


Developers: For information about how to extend the Print common dialog, see PRINTDLGEX Structure. 


- When extending the Print options common dialog, don't duplicate any features already provided. 


- Ifusers are likely to maintain settings from one print job to the next, make those settings the defaults. For the first print job 
after program launch, use the standard default values, including the default printer. For subsequent print jobs in the program 
instance, preserve the last selected printer and paper size. Don't preserve the number of copies or page ranges, because these 


are far less likely to be reselected later. 
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Optimize the settings by removing options that currently don't apply. Remove options that are inconsistent with the capabilities 
of the selected printer or characteristics of the current document. For example, a photo printing application could limit the 
combinations of paper size, paper type, and print quality that give the best results, so choosing a glossy paper option might 
remove envelopes from the paper formats. If for any reason users want to see all the options, you can provide this ability through 
a control such as a check box. 


Developers: To learn how to determine the capabilities of the selected printer, see Print Schema. 


For advanced document creation programs, save the document-related print options within the document itself. For these 
programs, the print options are an integral part of the document. 


For other types of programs, save settings on a per-user basis. 


Consider selecting a non-default printer for specialized printing. For example, a photo printing application could always select 
the printer last used by the program, regardless of the system default printer. Doing so assumes that the system default printer 
isn't likely to be a photo printer. Such programs should save the setting for the last selected printer. 


Don't lock up your program while detecting printer capabilities. Doing so presents a poor user experience. Instead, either: 
o Perform the printer capability detection in a separate thread. 


o Time out after 10 seconds. 
o Provide a dialog box to allow users to cancel. 


Fabrikam Mail 


Pie 7 7 7 
Pe Connecting to Fabrikam Document Writer... 


aml 


Cancel 


In this example, the dialog box makes it easy to cancel the printer capability detection if the user decides the task 
is taking too long. 


Print previews 


- Provide a print preview feature whenever appropriate. All document creation programs benefit from print previews, but users 
don't expect them in simple document creation programs. For advanced document creation programs, consider having print 
preview support directly within the main program window. 
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New in Windows Vista. 


Search boxes in Windows Viste: 


Are located iin the upper-rigmt corner of ail Windows Exporer windows, so They areessy D find 
and recognize. 


Have 2 more consent sppesrenfe and pensvior 


Show results besed onwihet uses expect in ther context For exemple Search inthe Stet meu 
searches for programs, recenty visted tiles, and Web stes, whesees Seah iin the Control Pane 
home page searches for Control Panel functionality. 

Support two types of seacches: regular seacch, whew eseach is pesformed whe the user clas 
the Search Dutton, and Instant search, where the results ave dispmyed immediatety = the user 
types. 

Have edvenced seach features or options accessible Troughs drop-down menu. 


In this example, Word has print preview support within the main program window. 


- Provide print preview features that allow users to: 
o Evaluate margins, page breaks, page orientation, headers, and footers. 


o Browse through all the pages. 
o Print directly from the print preview. 


Consider providing an interactive print preview so that users can adjust frequently changed settings like margins 
and line breaks directly within the preview. 


- Have print preview pages render within one second. It's better to have a print preview that renders quickly and is accurate 
enough to allow users to evaluate the print results than to have a completely accurate preview that renders slowly. 


- For advanced document creation programs, consider extending the standard Print dialog box by incorporating preview 
functionality directly within it, rather than creating a separate dialog for it. 


- Provide an obvious button for closing preview mode. 
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The Print Preview mode in Word has an obvious close preview command. 
Printing errors 


Note: Once the print job has been spooled to the printer, Windows is responsible for any subsequent errors. Your 
program only has to handle errors that happen before the print job is spooled. 


- Before spooling a print job, check for any potential printing problems the user can fix. Present a clear, concise confirmation 
before continuing to print. Whenever possible, offer to fix the problem automatically. Doing so can prevent a waste of time and 
money. 


Text 
- For the option to print on both sides of the paper, label the option Print double-sided. Don't use the phrase M anual Duplex. 
Documentation 


- Use print, not print out, asa verb. 
- It's acceptable to use printout to refer to the result of a print job. 
- Use print queue, not printer queue. 
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Windows Environment 
These articles provide guidelines for the various places within the M icrosoft ®Windows®environment: 


- Desktop 

- Start Menu 

- Taskbar 

- Notification Area 

- Windows Desktop Gadgets 
- Control Panels 

- Help 


. User Account Control 
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Desktop 


The desktop is the user's work area for their programs. It's not a way to promote awareness of your program or 
its brand. Don't abuse it! 


Design concepts 
Guidelines 
Documentation 


The desktop is the onscreen work area provided by Microsoft®Windows@® analogous to a physical desktop. It 
consists of a work area (with optional Sidebar in Windows Vista® and taskbar. The work area may span multiple 


monitors. 


Work area 


Taskbar 


A typical Windows desktop. 


The active monitor is the monitor where the active program is running. The default monitor is the one with the 
Start menu, taskbar, and notification area. 


Note: Guidelines related to the Start menu, taskbar, Windows gadgets, and notification area are presented in 
separate articles. 


Design concepts 
The Windows desktop has the following program access points: 


« Work area. The onscreen area where users can perform their work, as well as store programs, documents, and their shortcuts. 
While technically the desktop includes the taskbar, in most contexts it refers just to the work area. 


« Start button. The access point for all programs and special Windows places (Documents, Pictures, Music, Games, Computer, 
Control Panel), with "most recently used" lists for quick access to recently used programs and documents. 
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« Quick Launch. A direct access point for programs selected by the user. Quick Launch was removed from Windows 7. 


- Taskbar. The access point for running programs that have desktop presence. While technically the taskbar spans the entire bar from 
the Start button to the notification area, in most contexts taskbar refers to the area in between, containing the taskbar buttons. 
This area is sometimes referred to as the taskband. 


Deskbands. M inimized functional, long-running programs, such as the Language Bar. Programs that minimize to deskbands don't 
display taskbar buttons when minimized. Deskbands are not recommended for Windows 7. 


Notification area. A short-term source for notifications and status, as well as an access point for system- and program-related 
features that have no presence on the desktop. 


Thumbnail toolbar 


Pinned taskbar button Taskbar button Show desktop 


Start button Taskbar area Deskband Notification area 


The Windows desktop access points include the Start button, taskbar, deskbands, and notification area. Note the 
thumbnail feature of the taskbar button. 


The Windows desktop is a limited, shared resource that is the user's entry point to Windows. Leave users in 
control. You should use its areas as intended—any other usage should be considered an abuse. Never view them 
as ways to promote awareness of your program or its brand. 


For Windows 7, Original Equipment Manufacturers (OEMs) and Independent Hardware Vendors (IHVs) can use 
Device Stage to design a customized, branded UI for the computer and devices, without cluttering users' 
desktops. OEMs in particular can use Device Stage PC to feature custom programs, service offerings, and support. 
For more information, see the Microsoft Device Experience Development Kit. 


If you do only one thing... 
Don't abuse the desktop—keep users in control. If your target users are likely to use your program frequently, 
provide an option during setup to put a shortcut on the desktop, unselected by default. 


Guidelines 


- If your users are very likely to use your program frequently, provide an option during setup to put a program shortcut on 
the desktop. M ost programs won't be used frequently enough to warrant offering this option. 


- Present the option unselected by default. Requiring users to select the option is important because once undesired icons are on 
the desktop, many users are reluctant to remove them. This can lead to unnecessary desktop clutter. 


- If users select the option, provide only a single program shortcut. If your product consists of multiple programs, provide a shortcut 
only to the main program. 


Put only program shortcuts on the desktop. Don't put the actual program or other types of files. 


Correct: 


& 


Fabrikam Disk 
Defragmenter 


Incorrect: 
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@ 


Fabrikam Disk 
Defragmenter 


In the incorrect example, the program, not a shortcut, is copied to the desktop. 
- Choose a label that can be displayed without truncation. Users shouldn't see an ellipsis. 


Correct: 


© 


Fabrikam Disk 
Defragmenter 


Incorrect: 


© 


Fabrikam Disk 
Defragmenter... 


In the incorrect example, the program shortcut label is so long that it is truncated. 


Documentation 


« When referring to the desktop, use desktop, uncapitalized. 
« When referring to desktop shortcuts, use shortcut, uncapitalized. 
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Start Menu 


Use the Start menu to help users easily find and launch your program. Apply these guidelines to eliminate 
unnecessary Start menu items and folders, and choose program names and Start menu infotips easy to recognize 
and find. 


Design concepts 
Guidelines 
Program names 
Start menu files 
Start menu folders 
Start menu infotips 
Documentation 


On the Start menu, users start programs, files (local and shared), Web pages, and e-mail messages. It is the access 
point for all programs and special M icrosoft®W indows®places (Documents, Pictures, M usic, Games, Computer, 
Control Panel), with a "most frequently used" list for quick access to frequently used programs. 


@ Internet Explorer 


Pin list 
ts Microsoft Office Outlook 2007 Jonathan 
Documents 
=| Getting Started 
Pictures 
saa Windows Media Center 
Music 
Most frequently LN Sticky Notes 
used programs . 3 
omputer 
ae Calculator 
, Control Panel 
y Paint 
Default Programs 
2) Microsoft Office Communicator 
2007 Devices and Printers 
F<4 Windows Live Messenger 
Help and Support 
“~ Windows Live Call ‘ 
un... 
All Programs 


Seach box [Search programs ond fies DP je 


Start button Shut down 
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The Windows®Start menu. 


Note: Guidelines related to menus, taskbar, and the notification area are presented in separate articles. 


Design concepts 


The All Programs portion of the Start menu is essentially a menu tree. As explained in the tree view guidelines, 
there is a dilemma when using trees: Trees are intended to organize objects and make them easy to find, yet it's 
difficult to make objects within a tree easily discoverable. 


On the Start menu, the solution to this discoverability problem is to: 


Reduce the number of items in the Start menu by providing shortcuts to the main program executable files. Users access other 
program files from the programs themselves, appropriate control panel items, or setup programs. 


Eliminate unnecessary folders by putting programs at the top level or in a single product folder. Generally, your program should 
have a single shortcut on the Start menu. 


Choose self-explanatory program names that are easy to browse. 
Choose program names and Start menu infotips that contain individual words for which users are likely to search. 


Guidelines 


Program names 


There are many factors in choosing a program name, most significantly your program's image, recognition, and 
branding. The following Start menu guidelines affect your program's discoverability, which is especially important 
for programs that are not well known or that are used infrequently. Programs that are well known or used 
frequently have much more latitude in naming. 


Choose program names that are easy to browse: 
o Use self-explanatory names so that users can understand the primary purpose of your program by its name alone. 


o Use program names that alphabetize well. Start names with an alphabetic character, not a space, number, or symbol. 
o Avoid putting a version number in a program name unless that is how users normally refer to your program. 


- Choose program names that are easy to search: 


o Use either unique names that are easy to remember, or names that include words for which target users are likely to 
search. 


o Prefer individual words over compound words. 
o Avoid names that are easy to misspell or are misspellings. 
o Avoid names with jargon and made-up words. 


- Use title-style capitalization. 


Correct: 
® Fabrikam Disk Defragmenter 


Incorrect: 

® Fabrikam DiskDefragmenter 

® Fabrikam Disk Defragmenter 2007 
® Fabrikam Volume keeper 

® Fabrikam Volumnator 
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The incorrect examples use compound words, version numbers, or the term "volume" instead of "disk." Although 
"volume" is technically correct, most users associate volume with sound, not with disk drives. Made-up names 
make infrequently used programs hard to identify. 


Start menu files 


Put only program shortcuts on the Start menu. Don't put shortcuts to the following items on the Start menu: 
Program uninstallers. Users access uninstallers through the Programs control panel item. 


ie) 


Help files. Users access Help topics directly from your program. 


ie) 


o Control panel items. Users access control panel items from the Control Panel home page. 
o Program options. Users access program options from the Options command. 
Utility programs. Users access utilities from commands in the Tools menu. 


ie) 


eo) 


Readme files. Reconsider the need for such files, because most users never look at them. If you do need a Readme file, let 
users access it from your setup program. 


Web sites. Users access Web sites through appropriate links in your program, or Help for technical support sites. 


eo) 


Correct: 
® Fabrikam Disk Defragmenter 


Incorrect: 

® Fabrikam Disk Defragmenter 

@ Fabrikam Disk Defragmenter Help 
‘] Readme 

@ What's New 


In the incorrect example, there are unnecessary shortcuts to items that have more appropriate access points. 


Use only a single shortcut per program on the Start menu. Don't put shortcuts in different locations, such as in the top level and 
in the Accessories folder. Don't put shortcuts to access specific tasks within the program. 


Correct: 
® Fabrikam Disk Defragmenter 


Incorrect: 

® Fabrikam Disk Defragmenter 
® Fabrikam Quick Defragmenter 
® Fabrikam Disk Analyzer 


In the incorrect example, there are shortcuts to access specific tasks within the main program. 


Label the program shortcut using the program's name. Don't use other labels or include additional information in the label, such 
as trademark symbols. Don't include the company name unless users associate the company name with the product. Avoid 
putting the version number in a program shortcut unless that is how users normally refer to your program. 


Correct: 
® Fabrikam Disk Defragmenter 


Incorrect: 
® Fabrikam™ Disk Defragmenter™ 2007 
® Fabrikam Disk Defragmenter, Enterprise Edition 6.1.2.3 


The incorrect examples contain unnecessary information, version numbers, and trademark symbols. 
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- During setup, don't provide an option to put the program shortcut in the Start menu. Do this automatically. 


- During setup, don't provide an option to pin the program shortcut at the top of the Start menu. Let users choose to do this 
manually. Programs can no longer pin themselves in Windows Vista®and later. 


- Use title-style capitalization. 


Start menu folders 


- Locate program shortcuts in the top level of All Programs. The improved scalability of the Start menu in Windows 7 and 
Windows Vista makes programs easier to find at the top level. Exceptions: 

Use Control Panel to access control panel items. They don't have shortcuts in All Programs. Also use Control Panel to 

access troubleshooting programs. 


ie) 


Use the Accessories folder if target users think of your program as an accessory, and it isn't part of the core user 
experience. For example, Windows M edia Player is a core user experience (and therefore in All Programs), whereas 
Sound Recorder is not a core user experience (so it is in Accessories). 


eo) 


ie) 


Use the System Tools folder only if your program is a system maintenance utility. System maintenance utilities may 
appear in both System Tools and Control Panel. 


ie) 


Use the Administrative Tools folder for programs for IT professionals. 


ie) 


Don't use the Maintenance folder. It is reserved in Windows Vista for Backup and Restore Center, Help and Support, 
Problem Reports and Solutions, and Windows Remote Assistance. 


- Create a product folder only if your product is a collection of individual programs (three or more), and users think of your 
product in terms of that collection. 


Incorrect: 

)) Fabrikam 
@ Fabrikam Pro 
@ Fabrikam Viewer 


Correct: 

\)) Fabrikam 
8 Fabrikam Pro 
&@ Fabrikam Viewer 
@ Fabrikam Express 


In the incorrect example, there are only two individual programs, so they shouldn't be in a folder. 


- Use only a single-level product folder. 
o Exception: Use a secondary folder only if the product is a collection of several programs (six or more), and two or more of 
these programs are considered secondary utilities. 


Incorrect: 
)) Fabrikam 
)) Fabrikam Pro 
ry) Progams 
® Fabrikam Pro 
)) Fabrikam Games 
_)) Fabrikam Card Classics 
[fF] Fabrikam Solitaire 


Correct: 
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@ Fabrikam Pro 

) Fabrikam Card Classics 
[fF] Fabrikam Solitaire 
[fF] Fabrikam Hearts 
[IF] Fabrikam Bridge 


In the incorrect examples, there are unnecessary folders. 


Choose descriptive, yet concise folder names: 
o Use three words or fewer. 


Incorrect: 
db Fabrikam Professional System Management Utilities 


Correct: 
)) Fabrikam Utilities 


In the incorrect version, the folder name is too long. 


o Don't include trademark symbols. Avoid putting a version number in a folder unless that is how users normally refer to 


your product. Put the version number in the Start menu infotip instead. 


Incorrect: 
db Fabrikam Card Classics™ Version 1.2 


Correct: 
dd Fabrikam Card Classics 


The incorrect example contains an unnecessary version number and trademark symbol. 


o Use title-style capitalization. 


o Don't use the term folder in folder names. 


Start menu infotips 


Use Start menu infotips to describe the item concisely and list the primary tasks that users can perform with the item. 


Be helpful. Focus on what users can do. Don't just repeat the item name or even use it in the description at all. 


Be specific. Avoid generic verbs and catch-all phrases like and other tasks and and other kinds of documents. If the information is 


important, list it specifically; otherwise, assume that users understand that not everything is listed in the infotips. 
Be concise. Use 25 words or less. Longer infotips discourage reading. 


Start with a present-tense, imperative verb such as create, edit, show, and send. Prefer specific verbs over generic verbs such as 


manage and open. 


Incorrect: 


Correct: 
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Opens the Music folder, where you can store music and other audio files. 
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Music h 


Play music and other audio files. 


Computer 


In the incorrect example, the infotip starts with a generic verb. 


Don't use language that sounds like marketing. 


Incorrect: 
abricam Disk Defragmenter 7 


Your one-stop starting point for all your disk management needs. 


In this example, the infotip sounds like marketing. 


Use sentence-style capitalization. 


Developers: The Start menu infotip text comes from the item's Comment field. 


Documentation 


When referring to the Start menu, capitalize Start but don't capitalize menu. 
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Get right to the point. Don't use verbs that apply to any Start menu item, such as start, lets you, use to, and provides. 
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Taskbar 


The taskbar is the access point for programs displayed on the desktop. With the new Windows®7 taskbar 
features, users can give commands, access resources, and view program status directly from the taskbar. 


Is this the right user interface? 
Design concepts 
Guidelines 
Taskbar buttons 
Icons 
Overlay icons 
Taskbar button flashing 
Quick Launch shortcuts 
Jump Lists 
Thumbnail toolbars 
Progress bars 
Deskbands 
Text 
Documentation 


The taskbar is the access point for programs displayed on the desktop, even if the program is minimized. Such 
programs are said to have desktop presence. With the taskbar, users can view the open primary windows and 
certain secondary windows on the desktop, and can quickly switch between them. 


Jump list 


Tasks 


Go to MSN home page 


View Windows Live Profile 


Send an instant message... 
Available 


Busy 
Away 


Taskbar thumbnail 


Appear offline 


Thumbnail toolbar 
& Windows Live Messenger 


+ Pin this program to taskbar 


2% Close window 


E-mail inbox (4 new messa... 


Sign out from here (WIN7U.. 


Taskbar button Progress bar Overlay icons 


Taskbar 


The Microsoft ®W indows taskbar. 


The controls on the taskbar are referred to as taskbar buttons. When a program creates a primary window (or a 
secondary window with certain characteristics), Windows adds a taskbar button for that window and removes it 


when that window closes. Instead of minimizing to a taskbar button, programs may instead minimize to a 
deskband, which allows users to access the important commands while minimized. 


Programs designed for Windows 7 can take advantage of these new taskbar button features: 


Commands 


- Jump Lists provide quick access to frequently used destinations (like files, folders, and links) and commands through a context 
menu accessible from the program's taskbar button and Start menu item—even if the program isn't currently running. 
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Group 
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- Thumbnail toolbars provide quick access to frequently used commands for a particular window. Thumbnail toolbars appear in 
the taskbar button's thumbnail. 


Overlay icons show change of status on the program's taskbar button icon. 
Progress bars show progress for long-running tasks on the program's taskbar button. 


- Sub-window taskbar buttons allow users to use taskbar button thumbnails to switch directly to window tabs, project windows, 
multiple-document interface (M Dl) child windows, and secondary windows. 


- Pinned taskbar buttons allow users to pin program buttons to the taskbar to provide quick access to programs even when they 
aren't running. 


Technically, the taskbar spans the entire bar from the Start button to the notification area; more commonly, 
however, the taskbar refers only to the area containing the taskbar buttons. For multiple monitor configurations, 
only one monitor has a taskbar, and that monitor is the default monitor. 


Note: Guidelines related to Start menu, desktop, notification area, and window management are presented in 
separate articles. 


Is this the right user interface? 


Programs designed for Windows 7 can take advantage of these taskbar button features. Ask yourself the 
following key questions to determine whether or not to use them: 


Jump Lists 


- Do users often need to start new tasks using your program? If so, consider providing a Jump List. While Jump Lists can be used 
for other purposes, most scenarios involve starting a new task. 


- Do users often need to access recently or frequently used files, folders, links, or other resources? If so, consider providing a Jump 
List to access these useful resources. 


Frequent 

“@ MSN.com 

@) ProductsWeb 

BY Live Search 

@) Released Products 


é Internet Explorer 
@ Unpin this program from taskbar 


Bro ray Ss 


In this example, Windows Internet Explorer®uses a Jump List to present frequently visited pages. 


- Do users often need quick access to a small number of your program's commands while using other programs, even if your 
program isn't running? If so, consider providing a Jump List with these frequently used commands. These commands must work even 
if your program isn't running, and must apply to the entire program, not a specific window. As an alternative, consider providing 
a thumbnail toolbar for commands that apply to a specific window. 
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Tasks 


+ New Note 


‘| Sticky Notes 
+ Pin this program to taskbar 


= Close window 


In this example, the Sticky Notes accessory allows users to create a new note quickly while using other programs. 


- Are you promoting new, single use, or hard to find features? If so, don't use Jump Lists because they aren't intended for this 
purpose. Instead, improve the discoverability of such commands directly in the program. 


Thumbnail toolbars 
Do all of the following conditions apply? 


- Do the commands apply to a specific window? Thumbnail toolbars are for commands that apply to existing tasks, whereas Jump 
List commands are for starting new tasks. 


- Do users need to interact with a running task quickly while using other programs? If so, thumbnail toolbars are a good 
choice. Thumbnail toolbars can present a maximum of seven commands, but a maximum of five commands is generally preferred. 


- Are the commands immediate? That is, do they not require additional input? Thumbnail toolbars need to have immediate 
commands to be efficient, whereas J ump Lists work better with commands that require additional input. 


Incorrect: 


> Windows Live Messenger 


Example555@hotmailcom 


Enter your password 


= Jonathan 


Commands that require additional input don't work well on thumbnail toolbars. 


- Are the commands direct? That is, can users interact with them using a single click? Toolbars need to have direct commands to 
be efficient. 


- Are the commands well represented by icons? Thumbnail toolbar commands are presented using icons not text labels, whereas 
Jump List commands are represented by text labels. 


Incorrect: 
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In this example, the command isn't well represented by icons. 
Deskbands 


To decide to use deskbands, apply the same criteria as for thumbnail toolbars. Here are the advantages and 
disadvantages of each solution: 


Deskbands 
Advantages 

- Supported by all recent versions of Windows. 
Disadvantages 


- Not recommended for Windows 7. 

- Consume more taskbar space. 

- Users must opt in to use a deskband. 

- Not presented in the context of the associated program. 
- Can have only one deskband per program. 


Thumbnail toolbars 
Advantages 


- Don't consume any extra taskbar space. 

- Feature can work by default, without user configuration. 

- Can use more screen space for commands. 

- Presented in the context of the associated program's thumbnail. 
- Can have a toolbar for any taskbar button thumbnail. 


Disadvantages 
- Supported only in Windows 7. 


If quick, efficient access to important commands is an important part of your program's experience, consider 
providing both solutions, Enable thumbnail toolbars when users are running Windows 7, and provide deskbands 
when users are running earlier Windows versions. 


Overlay icons 


- Does the program have "desktop presence"? If not, use a notification area icon instead. If so, consider using an overlay icon instead 
of putting status on the notification area icon for programs designed for Windows 7. Doing so ensures that the icon will always be 
visible (when large icons are used), and consolidates the program with its status in one place. 


- Is the overlay icon displayed temporarily to show a change of status? If so, an overlay icon may be appropriate, depending on 
the following factors: 
o Isthe status useful and relevant? That is, are users likely to monitor the icon and change their behavior as a result of this 
information? If not, either don't display the status, or put it in a log file. 
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Incorrect: 


Oe | FB 


In this example, an unnecessary overlay icon displays available disk space. 


o Isthe status useful and relevant while using other programs? If not, display the information in the program's status bar or 


other program status area. 


eé MSN.com - Internet Explorer provided by 


COW - @) http://www.msn.... v | #9] X 


ly Favorites 533 €, Get More Add-ons ¥ 


é) MSN.com (7) far ¥ O - 


Your TAX RETURN is due4/15! 
Web 


2 Hotmail Airfares & Travel 
Autos 

Careers & Jobs 

2 My MSN City Guides 

® MSN Directory Dating & Personals 


®° Messenger 


MSN Images 


Food & Ente 
Games 

Green Livinc 
Health & Fitr 


Horoscopes 
ad 


@ Internet | Protected Mode: On 


In this example, the status bar is used because the status isn't useful when using other programs. 


o Isthe status showing progress? If so, use a taskbar button progress bar instead. 


o Isthe status critical? Is immediate action required? If so, display the information in a way that demands attention and cannot be 


easily ignored, such as a dialog box. 


Progress bars 


- Isthe progress feedback useful and relevant while using other programs? That is, are users likely to monitor the progress while 
using other programs, and change their behavior as a result? Such useful and relevant status is usually displayed using a 
modeless progress dialog box or a dedicated progress page, but not with a busy pointer, activity indicator, or progress bar on a 
status bar. If the status isn't useful when using other programs, just display the progress feedback directly in the program itself. 


Correct: 
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= Copying 38 items (5.41 MB) 


from Local Disk (C:) (C:\) to Local Disk (C:) (C:\) 
Discovered 38 items (5.41 MB)... 


(¥) More information 


Incorrect: 


@S a|f 


In the incorrect example, the taskbar button progress bar isn't very useful. 


- Isthe task continuous? If the task never completes, there's no need to show its progress. Examples of continuous tasks include 
antivirus scans that aren't initiated by users, and file indexing. 


Incorrect: 


la) 


In this example, a continuous task doesn't need to show progress. 
Sub-window taskbars 


- Does your program contain tabs, project windows, MDI child windows, or secondary windows that users would often want to 
switch to directly? If so, giving these windows their own taskbar button thumbnails may be appropriate. 


Design concepts 
Using J ump Lists and thumbnail toolbars effectively 


Jump Lists and thumbnail toolbars help users access resources and perform commands more efficiently. 
However, when designing how your program supports these features, don't take improved efficiency for granted. 
If users can't accurately predict which feature has the command they need, or they have to check multiple places, 
eventually users will become frustrated and stop using these features. 


Jump Lists and thumbnail toolbars work together most effectively when they are: 


- Clearly differentiated. Users know when to look for a destination or command in aJump List, and when to look in a thumbnail 
toolbar. There is a clear purpose for each, so users rarely confuse the contents of the two. Generally, Jump Lists are used to start 


new tasks, whereas thumbnail toolbars are used to interact with running tasks while using other programs. 
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- Useful. The destinations and commands offered are the ones that users need. If users aren't likely to need something, it isn't 
included. Don't use the maximum number of items if they aren't needed. 


- Predictable. The destinations and commands offered are the ones that users expect to find. Users rarely have to look in more than 
one place. 


- Well organized. Users are able to find what they are looking for quickly. They use descriptive yet concise labels, and suitable icons to 
aid recognition. 


Be sure to do user research to make sure you've got it right. If you ultimately find that you can't design J ump Lists 
and thumbnail toolbars together that achieve these goals, consider providing only one of them. It's better to have 
one predictable way to give commands than two confusing ones. 


Guidelines 
Taskbar buttons 


- Make the following window types appear on the taskbar (for Windows 7, by using a taskbar button thumbnail): 
o Primary windows (which includes dialog boxes without owners) 


o Property sheets 
o Modeless progress dialog boxes 
o Wizards 


- For Windows 7, use taskbar button thumbnails to group the following window types with the primary window taskbar button it 
was launched from. Each program (specifically, each program perceived as a separate program) should have a single taskbar button. 
o Secondary windows 


o Workspace tabs 
o Project windows 
o MDI child windows 


Correct: 


To C:\Wnery\ Public’ Pictures| Sample Pictures’ 
About 17 Merstes remeereng 


In this example, a secondary window is grouped with its primary window's taskbar button. 


Incorrect: 


E| Control Panel 
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- Restoring a primary window should also restore all its secondary windows, even if those secondary windows have their own 
taskbar buttons. When restoring, place secondary windows on top of the primary window. 


- For Windows 7, programs that normally have desktop presence may temporarily display a taskbar button to show status. Do so 
only if your program is normally displayed on the desktop and users frequently interact with it. A program that normally runs 
without desktop presence should use its notification area icon instead, even though it might not always be visible. 


Icons 


- Design your program icon to look great on the taskbar. Ensure it is meaningful, and reflects its function and your brand. M ake 
it distinct, make it special, and ensure it renders well in all icon sizes. Spend the time necessary to get it right. Follow the Aero-style 
icon guidelines. 


- If your program uses overlay icons, design your program's base icon to handle overlays well. Overlay icons are displayed in the 
lower right corner, so design the icon so that area can be obscured. 


8 (|e) a) 


In this example, the program's taskbar button icon doesn't have important information in the lower right area. 


- Don't use overlays in your program's base icon, whether your program uses overlay icons or not. Using an overlay in the base icon 
will be confusing because users will have to figure out that it's not communicating status. 


In this example, Control Panel is incorrectly grouped with Windows Explorer. Users perceive these as separate 
programs. 


Incorrect: 


.. Backup and Restore 


2% Windows Backup...15% complete 


Windows Dackup is curtenthy im progress 


CORP tree Aeon Lee dateine Uptetad? dren vermome wernt VE cmt TIE | eo 


Cpe te feta aout Genta s cota! Pat we ree vege 


In this example, Windows Backup incorrectly uses two taskbar buttons for a single program. 


Incorrect: 


< Sync Center 


In this example, Windows Sync Center incorrectly uses a temporary taskbar button to display status. It should use 
its notification area icon instead. 


| t 
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For general icon guidelines and examples, see Icons. 


(al 


In this example, the program's base icon looks like it is showing status. 


Overlay icons 
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Use overlay icons to indicate useful and relevant status only. Consider the display of an overlay icon to be a potential interruption 


of the user's work, so the status change must be important enough to merit a potential interruption. 


Incorrect: 


In these examples, the overlay icon isn't important enough to merit a potential interruption. 


Use overlay icons for temporary status. The overlay icons lose their value if displayed constantly, so normal program status should 


not show an icon. Remove the overlay icon when the icon: 
o Isfora problem: Remove the icon once the problem has been resolved. 


o Alerts that something is new: Remove the icon once the user has activated the program. 
Exception: Your program can constantly display an overlay icon if users always need to know its status. 


In this example, Windows Live M essenger always displays an overlay icon so that users can always check their 


reported presence. 


Don't display an icon to indicate that a problem has been solved. Instead, simply remove any previous icon indicating a 
problem. Assume that users normally expect your program to run without problems. 


Display either overlay icons or notification area icons, but never both. Your program may support both mechanisms for 


backward compatibility, but if your program displays status using overlay icons, it shouldn't also use notification area icons for status. 


Incorrect: 


In this example, the new mail icon is displayed redundantly. 


Don't flash the taskbar button to draw attention to a status change. Doing so would be too distracting. Let users discover overlay 


icons on their own. 


Prefer standard overlay icons to indicate status or status changes. Use these standard overlay icons: 


Overlay |Status 

A [Waring 
[x] [Error 

x [Disabled/ Disconnected 


i) Blocked/ Offline 


For custom overlay icons, choose an easily recognizable design. Use high-quality 16x16 pixel, full color icons. Prefer icons 
with distinctive outlines over square or rectangular shaped icons. Apply the other Aero-style icon guidelines as well. 


Keep the design of custom overlay icons simple. Don't try to communicate complex, unfamiliar, or abstract ideas. If you can't think of 


a suitable custom icon, use a standard icon error or warning icon instead when appropriate. These icons can be used effectively 
to communicate many types of status. 


Don't change status too frequently. Overlay icons shouldn't appear noisy, unstable, or demand attention. The eye is sensitive 
to changes in the peripheral field of vision, so status changes need to be subtle. 
o Don't change the icon rapidly. If underlying status is changing rapidly, have the icon reflect high-level status. 
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Incorrect: 


e ®@ 


In this example, the rapidly changing overlay icon demands attention. 


o Don't use animations. Doing so is too distracting. 


o Don't flash the icon. Doing so is too distracting. If an event requires immediate attention, use a dialog box instead. If the 
event otherwise needs attention, use a notification. 


Taskbar button flashing 


- Use taskbar button flashing sparingly to demand the user's immediate attention to keep an ongoing task running. It's hard for 
users to concentrate while a taskbar button is flashing, so assume that they will interrupt what they are doing to make it stop. 
While flashing a taskbar button is better than stealing input focus, flashing taskbar buttons are still very intrusive. M ake sure 
the interruption is justified, such as to indicate that the user needs to save data before closing a window. Inactive programs 
should rarely require immediate action. Don't flash the taskbar button if the only thing the user has to do is activate the program, read 
a message, or see a change in status. 
If immediate action isn't required, consider these alternatives: 
o Use an action success notification to indicate that a task has completed. 


o Do nothing. Just wait for users to attend to the issue the next time they activate the program. This is often the best choice. 


- If an inactive program requires immediate attention, flash its taskbar button to draw attention and leave it highlighted. Don't 
do anything else: don't restore or activate the window and don't play any sound effects. Instead, respect the user's window 
state selection and let the user activate the window when ready. 


- For secondary windows that have a taskbar button, flash its button instead of the primary window's taskbar button. Doing so 
allows users to attend to the window directly. 


- For secondary windows that don't have a taskbar button, flash the primary window's taskbar button and bring the 
secondary window on top of all the other windows for that program. Secondary windows that require attention must be topmost 
to ensure that users see them. 


Flash only one taskbar button for one window at a time. Flashing more than one button is unnecessary and too distracting. 


- Remove the taskbar button highlight once the program becomes active. 


- When the program becomes active, make sure there is something obvious to do. Typically, this objective is accomplished by 
displaying a dialog box that asks a question or initiates an action. 


Quick Launch shortcuts 


- Put program shortcuts in the Quick Launch area only if users opt in. Because Quick Launch was removed from Windows 7, 
programs designed for Windows 7 shouldn't add program shortcuts to the Quick Launch area or provide options to do so. 


Jump Lists 
Design 


- Design Jump Lists to satisfy your users' goals for their everyday tasks. Consider: 

o Your program's purpose. Think about what users are most likely to do next. For document creation programs, users are likely to 
return to recently used documents. For programs that show existing content, users may want access to resources they use 
frequently. For other programs, users might be likely to do tasks they haven't done before, such as read new messages, watch 
new videos, or check their next meeting. 


o What users care about most. Think about why users would use the Jump List instead of other means. For example, users are more 
likely to care about destinations they explicitly identified as important (such as Web addresses users placed on their links bar or 
in Favorites, or typed in). They are less likely to care about those obtained indirectly or with little effort (such as Web addresses 
visited through redirection or by clicking links). 


Correct: 


© 2010, Microsoft Corporation. All rights reserved. Page 768 of 882 


Frequent 


@) Fabilameom pL), 


“@ MSN.com 


B® Live Search 


@ Internet Explorer 
@ Unpin this program from taskbar 


SZ Close window 


Incorrect: 


Frequent 


= 
@) www-Fabrikam.com in 

@) www-Fabrikam.com\home.htm 

@) www-Fabrikam.com\products.htm 

@)| www.Fabrikam.com\aboutCompany... 


B® Live Search 


@ Internet Explorer 
@& Unpin this program from taskbar 


YZ Close window 


In the incorrect example, the Jump List contains many destinations that users aren't likely to care about. 


- Don't make destinations too granular. M aking destinations too narrow and specific can result in redundancy, with several ways to go 


to the same place. For example, instead of listing individual Web pages, list top-level home pages instead; instead of listing songs, 
list albums. 


Correct: 


Frequent 
©) Quiet Songs - Aisha Duo 

@ Muso Ko - Habib Koité and Bamada 
©) Realize - Karsh Kale 

Tasks 

© Resume last playlist 

\(® Play all music shuffled 


> | Windows Media Player 
@ Unpin this program from taskbar 
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Incorrect: 


Frequent 


©) Amanda - Aisha Duo 

©) Despertar - Aisha Duo 

©) Din Din Wo (Little Child) - Habib ... 
©) Distance - Karsh Kale 

© One Step Beyond - Karsh Kale 
Tasks 

© Resume last playlist 

(> Play all music shuffled 


> | Windows Media Player 
@& Unpin this program from taskbar 


In the incorrect example, listing songs in a Jump List will fill it with a single aloum. 


- Don't fill all the available Jump List slots if you don't need to. Focus Jump List content on the most useful items—if your program 
has only three useful items, provide only three. The more items in a Jump List, the more effort required to find any specific item. 


Tasks 
+ New Note 


‘| Sticky Notes 


+ Pin this program to taskbar 


2% Close window 


In this example, the Sticky Notes accessory provides a single J ump List command, because that's all that is needed. 


- Provide tooltips only when needed to help users understand Jump List items. Avoid redundant tooltips because they are 
an unnecessary distraction. For more tooltip guidelines, see Tooltips and Infotips. 


Incorrect: 
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Frequent 

(=| All Pictures 

2) Favorite All Music 
Tasks 


| Resume last plavlist 


® Play all music sh{ Resume last playlist 


[5 Windows Media Player 
@& Unpin this program from taskbar 


%< Close window 


In this example, the Jump List tooltip is redundant. 
Jump List features vs. program features 


- Don't make destinations and commands available only through Jump Lists. The same destinations and commands should be 
available directly from the program itself. 


- Use consistent names for destinations and labels for commands. Jump List items should be labeled the same as the equivalent 
items accessed directly from the program. 


- Enable your program to handle destinations and commands even when the program isn't running. Doing so is necessary for 
a consistent, dependable, and convenient experience. 


Grouping 


- Provide at least one and at most three groups. | ump List items are always grouped to label their purpose. Having more than 
three groups makes items harder to find. 


- Use the following standard group names when appropriate. Standard group names are easier for users to understand. 


Recent 
Frequent 


Commands are given the Tasks group name, which is assigned by Windows and therefore can't be changed. 


Correct: 


Recent 


«| Mountain 


LJ 


¥ Paint 


- Pin this program to taskbar 


3 Close window 


Incorrect: 
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«| Mountain 


Ee 


Y Paint 
~ Pin this program to taskbar 


x< Close window 


Recent is the better group name because it is familiar, and the subtle distinction between history and recent isn't 
worth making. 


Commands 


- Provide a fixed set of commands regardless of program running state, current document, or current user. The commands should 
apply to the entire program, not to a specific window or document. Doing so is necessary for a consistent, dependable, and 
convenient experience. Commands shouldn't be removed or disabled. 

Exceptions: You may substitute or remove commands when: 
o Aset of mutually exclusive commands share a single command slot, as long as one command always applies. 


o Commands don't apply until specific features have been used, as long as the commands otherwise always apply. 


Incorrect: 


Recent 


\w| Green theme 
js) Park 


Tasks 


i Print 


Y Paint 


+ Pin this program to taskbar 


2% Close window 


In this example, Print isn't a good Jump List command because it depends on the current document. 


Correct: 
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Tasks 
Go to MSN home page 


E-mail inbox 
View Windows Live Profile 


Send an instant message... 


Tasks 


Go to MSN home page 
E-mail inbox (3 new messages) 


View Windows Live Profile 


Send an instant message... 


Available _ Available 
Busy Busy 
Away Away 


Appear offline Appear offline 


Sign in... Sign out from here 


& Windows Live Messenger & Windows Live Messenger 


@ Unpin this program from taskbar @& Unpin this program from taskbar 


2S Close window 2% Close window 


—— 
: 


In this example, Sign in and Sign out are mutually exclusive commands. Also, separators are used to group related 
commands. 


- Use the following standard command labels when appropriate. Standard command labels are easier for users to understand. 


Sign in/Sign out 

New <object name> 

Play <object name> 

Go to <specific object name> 
Start 

Sync 


- Present the commands in a logical order. Common orders include by frequency of use or order of use. Place highly related 
commands next to each other. Within the Tasks group, put separators between groups of related commands as needed. 


- Don't provide commands for opening or closing the program. These commands are built into all Jump Lists. 
Command icons 


- Within the Tasks group, provide a command icon only when it helps users understand, recognize, or differentiate 
commands, especially when there is an established icon for the command used within the program. 
o Exception: If your program uses both destinations (which always have icons) and commands, consider providing icons for all 
commands if not doing so would look awkward. 


Incorrect: 
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Frequent 


“@ MSN.com 
BY Windows User Experience Interac... 
2B" Kumo Search 
| Mi Microsoft Corporation 
£2 Microsoft Windows: software an... 
Tasks 

InPrivate 

New Tab 


e@ Internet Explorer 
@& Unpin this program from taskbar 


In this example, Internet Explorer should provide icons for all commands to avoid an awkward appearance. 


Destinations 


- Provide a dynamic set of destinations that are specific to the current user, but independent of the program running state or 
current document. As mentioned previously, make sure they fit your program's purpose, are what users care about the most, and 
have the right level of specificity. 


- When suitable, use an "automatic" destination list. Automatic destinations are managed by Windows, but your program controls 
the specific destinations that are passed on. 


o Consider using Recent for document creation programs where users are likely to return to recently used destinations. 


Recent 
|_| Address.txt 
|_| BookList.be 


| Notepad 
- Pin this program to taskbar 


= Close window 


J @ | 4h 


In this example, Windows Notepad uses Recent destinations. 


o Consider using Frequent for programs that show existing content, where users are likely to return to items that they use often. 
Frequent destinations are sorted in order of frequency, most frequent first. 
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Frequent 
Wy Desktop 
[=] Documents 


tm) Pictures 
) Music 
Videos 


,) demo 


Xd Resource 


)) chart 


Windows Explorer 
@& Unpin this program from taskbar 


In this example, Windows Explorer uses Frequent destinations. 


o Use Frequent if Recent would result in many useless destinations. Frequent lists are more stable, and the better choice when users go 
to many different destinations, but aren't likely to return to rarely used ones. 


Incorrect: 


Recent 

@ www.Fabrikam.com\home.htm 
@) MSW Home Page 

“@ MSN.com 

© Microsoft Amalga 

© Web Amalga Login 

© Microsoft Web Amalga 

#4 Live Search 

@) ProductsWeb 

#4 Live Search Local 

© Microsoft Amalga 

2 Live Search.com 

@_ Blend Builds 

@)| www.Fabrikam.com\aboutCompany... 
@) Released Products 

@)| Download 


é Internet Explorer 
@ Unpin this program from taskbar 


Using Recent in Windows Internet Explorer would result in many useless destinations. 


o If Recent or Frequent are equally suitable choices, use Recent because that approach is easier for users to understand and is 
more predictable. 


o If using Recent, and the program has an equivalent in the File menu, make the lists have the same contents in the same order. To 
users, these should appear to be the same lists. 
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- When necessary, use a custom destination list. Your program has complete control over a custom destination list's contents and 
sort order, and therefore can base the list on any factors. 
o Create custom versions of Recent or Frequent if those are suitable, but the automatic management doesn't work well for your 
program. For example, your program may need to track a variety of factors beyond open file commands. In this case, use the 
same name (Recent or Frequent) and sort order because users won't be aware of the difference. 


o Otherwise, use a different type of destination to better satisfy your user's goals. Often, these lists help users perform tasks that 
they haven't done before, such as read new messages, watch new videos, or check their next meeting. 


New Recorded TV 

@® Fabrikam News (4/12/2009) 
@® Fabrikam News (4/11/2009) 
Sports (4/08/2009) 


Frequent 
@ Forest Flowers 
6) Love Comes 


§ ff Play All Videos 
6) One Step Beyond 


© Windows Media Center 
@ Unpin this program from taskbar 


SZ Close window 


In this example, Windows M edia Center lists the recently recorded shows that the user hasn't seen yet. 


o Choose a sort order that corresponds to the user's mental model of the list. For example, a to-do style list would have the next thing 
to do listed first. If there is no clear mental model, sort the destination list in alphabetical order. 


- Don't use multiple destination lists that give different views of the same data. Rather, multiple destination lists should have 
mostly different data to support difference scenarios. For example, you can provide a Recent list or a Frequent list, but not both. 
Doing so is wasteful if overlapping items are present, but confusing if overlapping items are removed. 


Incorrect: 


Recent 

lf Forest Flowers 
§) Love Comes 

62 OAM's Blues 

63 One Step Beyond 
Frequent 

Forest Flowers 
63 Love Comes 


Af Play All Videos 
63 One Step Beyond 


© Windows Media Center 
@ Unpin this program from taskbar 


2% Close window 
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In this example, providing different views of the same destinations is wasteful. 


Correct: 


Frequent 

i@ Forest Flowers 
62 Love Comes 

§ Play All Videos 
62 One Step Beyond 


© Windows Media Center 
@ Unpin this program from taskbar 


X< Close window 


In this example, the destination lists have different data for different tasks. 


- If your program has a command to clear data for privacy, clear the Destinations lists as well. Destination lists may contain 
sensitive data. 


Thumbnail toolbars 
Interaction 


- Provide up to seven of the most important, frequently used commands that apply to the window shown in the thumbnail. Don't 
feel obligated to provide as many commands as you can—if your program has only three important, frequently used commands, 
provide only three. 


Incorrect: 


>) Windows Media Player 


® 


_ = 


In this example, the thumbnail toolbar has commands that aren't important. 


- Use commands that are direct and immediate. These commands should have an immediate effect—clicking the command should 
not display a drop-down menu or dialog box for more input. 


Incorrect: 
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Jonathan rf 


Thumbnail toolbar commands must have an immediate effect. 


- Disable commands that don't apply to the current context, or that would directly result in an error. Don't hide such 
commands because doing so makes the toolbar presentation unstable. 


- Don't dismiss the thumbnail when users click a command if they are likely to review the results or immediately click 
another command. Remove the thumbnail for commands that indicate that the user is finished for now, such as with commands 
that display other windows. 


> Windows Media Player 


In this example, clicking Next in Windows M edia @Player continues to display the thumbnail because users might 
want to give other commands. 


Joe (Available) 


In this example, clicking Chat in Windows Live M essenger dismisses the thumbnail because users are most likely to 
send a message. 


Presentation 
- Make sure thumbnail toolbar icons conform to the Aero-style icon guidelines. For each command, provide high-quality 16x16, 


20x20, and 24x24 pixel, full color icons. The larger versions are used in high-dpi display modes. 
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- Make sure the icons are clearly visible against the toolbar background color in both normal and hover states. Always evaluate icons 
in context and in the high-contrast modes. 


- Choose command icon designs that clearly communicate their effect. Well-designed command icons are self-explanatory to help 
users find and understand commands efficiently. 


- Choose icons that are recognizable and distinguishable. M ake sure the icons have distinctive shapes and colors. Doing so helps 
users find the commands quickly, even if they don't remember the icon symbol. After initial use, users shouldn't have to rely on 
tooltips to distinguish between the commands. 


- Provide a tooltip to label each command. A good tooltip labels the unlabeled control being pointed to. For guidelines and 
examples, see Tooltips and Infotips. 


Progress bars 


- Follow the general progress bar guidelines, including not restarting or backing up progress, and using a red progress bar to indicate 
a problem. 


- Avoid using indeterminate progress bars. Indeterminate progress bars show activity, not progress. Reserve indeterminate progress 
bars for those rare situations where users don't take activity for granted. 


For more guidelines, see Progress Bars. 


Deskbands 


Note: Deskbands are no longer recommended for Windows 7. Use a taskbar button with a thumbnail toolbar 
instead. Your program may support both mechanisms for backward compatibility. 


- Display deskbands only if users opt in. Offer to show deskbands in your program's setup and properties, but the option must be 
turned off by default. 


- Keep deskbands compact and simple. Don't include any features directly on deskband windows that aren't accessed by most users 
in most scenarios. However, you can use menus to access less commonly used features. 


- Don't display programs in the taskbar that minimize to deskbands. M inimize to a taskbar button or a deskband, but not both. 


- Make sure that deskbands use screen space efficiently in both horizontal and vertical orientations. Doing so usually requires 
having orientation-specific layouts. 


Correct: 


Vertical 


Honzontal 


Incorrect: 


Vertical 


Horizontal 
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In the incorrect example, the deskband always uses same layout, resulting in an inefficient use of screen space in 
the vertical orientation. 


Text 
Window titles 
When choosing window titles, consider the title's appearance on the taskbar: 


- Optimize titles for display on the taskbar by concisely placing the distinguishing information first. 
- For modeless progress dialog boxes, first summarize the progress. Example: "66% Complete." 
- Avoid window titles that have awkward truncations. 


Incorrect: 


| 


+2 Windows Live Mess... 


In this example, the truncated window title has unfortunate results. 
Jump List commands 


- Start commands with a verb. 
- Use sentence-style capitalization. 


For more command label guidelines, see Menus. 


Documentation 
When referring to the taskbar: 


- Refer to the entire bar as the taskbar (a single compound word in lowercase). 
- Refer to items on the taskbar specifically by their label, or generally as taskbar buttons. 


- When possible, format the taskbar labels using bold text. Otherwise, put the label in quotation marks only if required to 
prevent confusion. 


- Refer to overlay icons as taskbar button icons. Don't refer to them as notifications, even if their purpose is to notify users. However, 
you can say that these icons notify users of specific events. 


Example: The New Mail taskbar button icon notifies you that a new e-mail message has arrived. 
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Notification Area 


The notification area provides notifications and status. Well-designed programs use the notification area 
appropriately, without being annoying or distracting. 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
General 
When to show 
Where to show 
Icons 
Interaction 
Context menus 
Rich tooltips 
Notification area flyouts 
Options dialog box 
Minimizing programs to the notification area 
Text 
Documentation 


The notification area is a portion of the taskbar that provides a temporary source for notifications and status. It 
can also be used to display icons for system and program features that have no presence on the desktop. 


Items in the notification area are referred to as notification area icons, or simply icons if the context of the 
notification area is already clearly established. 


10:10 AM 


~ © "2 220/208 


The notification area. 


To give users control of their desktop in Windows®7, not all notification area icons are displayed by default. 
Rather, icons are displayed in the notification area overflow unless promoted to the notification area by the user. 


= G 6 
wo © 


Customize... 


11:22 AM 


ull 1) 4/17/2009 


The notification area overflow. 


Note: Guidelines related to the Start menu, taskbar, notifications, and balloons are presented in separate 
articles. 


Is this the right user interface? 
To decide, consider these questions: 


- Does your program need to display a notification? If so, you must use a notification area icon. 


- Isthe icon displayed temporarily to show a change of status? If so, a notification area icon may be appropriate, depending upon 
the following factors: 
o Isthe status useful and relevant? That is, are users likely to monitor the icon and change their behavior as a result of this 
information? If not, either don't display the status, or put it in a log file. 
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Incorrect: 


In this example, the disk drive activity icon is inappropriate because users are unlikely to change their behavior 
based on it. 


> Isthe status critical? Is immediate action required? If so, display the information in a way that demands attention and cannot be 
easily ignored, such as a dialog box. 


Programs designed for Windows 7 can use overlay icons on the program's taskbar button to show change of status, as well as 
taskbar button progress bars to show progress of long-running tasks. 

Does the feature already have "desktop presence"? That is, when run, does the feature appear in a window on the desktop 
(possibly minimized)? If so, display status in the program's status bar, other status area, or, for Windows 7, directly on the 
taskbar button. If the feature doesn't have desktop presence, you can use an icon for program access and to show status. 


Is the icon primarily to launch a program or access its features or settings quickly? If so, use the Start menu to launch 
programs instead. The notification area isn't intended for quick program or command access. 


In this example from Windows Vista® Quick Launch is used to launch Windows Explorer and Windows Internet 
Explorer ®quickly. 


For programs designed for Windows 7, users can pin taskbar buttons for quick program access. Programs can use 
a Jump List or thumbnail toolbar to access frequently used commands directly from a program's toolbar button. 
The Quick Launch area isn't displayed by default in Windows 7. 


Frequent 


[=| Documents 

im) Pictures 

@) Music 

Videos 

By Desktop 

r) Sample Pictures 


(a Windows Explorer 
@ Unpin this program from taskbar 


ey 


In this example, a Jump List is used for quick command access. 


Design concepts 
The Windows desktop 


The Windows desktop has the following program access points: 


Work area. The onscreen area where users can perform their work, as well as store programs, documents, and their shortcuts. 
While technically the desktop includes the taskbar, in most contexts it refers just to the work area. 


Start button. The access point for all programs and special Windows places (Documents, Pictures, Music, Games, Computer, 
Control Panel), with "most recently used" lists for quick access to recently used programs and documents. 


Quick Launch. A direct access point for programs selected by the user. Quick Launch was removed from Windows 7. 


Taskbar. The access point for running programs that have desktop presence. While technically the taskbar spans the entire bar from 
the Start button to the notification area, in most contexts taskbar refers to the area in between, containing the taskbar buttons. 
This area is sometimes referred to as the taskband. 


Deskbands. M inimized functional, long-running programs, such as the Language Bar. Programs that minimize to deskbands don't 
display taskbar buttons when minimized. Deskbands are not recommended for Windows 7. 
© 2010, Microsoft Corporation. All rights reserved. Page 782 of 882 


- Notification area. A short-term source for notifications and status, as well as an access point for system- and program-related 
features that have no presence on the desktop. 


Thumbnail toolbar 


Pinned taskbar button Taskbar button Show desktop 


& Windows Media P... | 14 Inbox - Microsoft ... 


Start button Taskbar area Deskband Notification area 


The Windows desktop access points include the Start button, taskbar, deskbands, and notification area. Note the 
thumbnail feature of the taskbar button. 


The desktop is a limited, shared resource that is the user's entry point to Windows. Leave users in control. You 
should use the desktop areas as intended—any other usage should be considered an abuse. For example, never 
view desktop areas as ways to promote your program or its brand. 


Using the notification area appropriately 


The notification area was originally intended as a temporary source for notifications and status. Its efficiency and 
convenience has encouraged developers to give it other purposes, such as launching programs and executing 
commands. Unfortunately over time, these additions made the notification area too large and noisy, and 
confused its purpose with the other desktop access points. 


Windows XP addressed the scale problem by making the area collapsible and hiding the unused icons. Windows 
Vista addressed the noise by removing unnecessary, annoying notifications. Windows 7 has gone a step further 
by focusing the notification on its original purpose of being a notification source. Most icons are hidden by 
default in Windows 7, but can be promoted to the notification area manually, by the user. To keep users in 
control of their desktops, there is no way for your program to perform this promotion automatically. Windows 
still displays notifications for hidden icons by promoting them temporarily. 


& & 


Customize... 


12/29/2008 uj 


In Windows 7, most notification area icons are hidden by default. 
In addition, Windows 7 supports many features directly in the taskbar buttons. Specifically, you can use: 


« Jump Lists and thumbnail toolbars to quickly access frequently used commands. 
« Overlay icons to show status for running programs. 
« Taskbar button progress bars to show progress for long-running tasks. 


In short, if your program has desktop presence, take full advantage of the Windows 7 taskbar button features for 
these purposes. Keep the notification area icons focused on displaying notifications and status. 


Keeping users in control 
Keeping users in control extends beyond using the notification area correctly. Depending on the nature of your 


icon, you may want to let users do the following: 
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« Remove the icon. Your icon may provide relevant, useful status, but even so, users may not want to see it. Windows allows users 
to hide icons, but this feature isn't easily discoverable. To keep users in control, provide a Display icon in notification area option on 
the icon's context menu. Note that removing an icon doesn't have to affect the underlying program, feature, or process. 


- Select types of notifications to display. Your notification must be useful and relevant, but there may be notifications that users 
don't want to see. This is especially true for FYI notifications. Let users choose to enable the less important ones. 


Suspend optional features. Icons are used to display status for features without desktop presence. Such features tend to be 
long-running, optional background tasks, such as printing, indexing, scanning, or synchronizing. Users may want to suspend 
such features to increase system performance, reduce power consumption, or because they are offline. 


- Quit the program. Provide the more suitable of these options: 


> Temporarily quit program. The program is stopped and restarted when Windows is restarted. This approach is suitable for 
important system utilities such as security programs. 


> Permanently quit program. The program is stopped and not restarted when Windows is restarted (unless the user chooses to 
restart later). Either the user no longer wants to run the program, or wants to run the program on demand—perhaps to improve 
system performance. 


Although it's a good idea to provide most of these settings on the icon's context menu, the program's default 
experience should be suitable for most users. Don't turn everything on by default and expect users to turn 
features off. Rather, turn the important features on by default, and let users enable additional features as 
desired. 


If you do only four things... 

1. Don't abuse the notification area. Use it only as a source for notifications and status, and for features without 
desktop presence. 

2. Keep users in control. Provide appropriate options to control the icon, its notifications, and the underlying 
features. 

3. Present a default experience that is suitable for most users. Let users enable desired features rather than 
expect them to disable undesired ones. 

4. Take full advantage of the Windows 7 taskbar button features to show status and make your program's most 
frequently performed tasks efficient. 


Usage patterns 


Notification area icons have several usage patterns: 


System statusand access System features that need notification area icons have no persistent desktop presence. Can also be used asa 
Displayed continuously to _ notification source. 

show important but not 
critical system status, and 
to provide access to 

relevant features and i) i op) 
settings. 


08 


In this example, the battery, network, and volume icons are displayed continuously when applicable. 


Background task status Background processes need notification area icons when they have no desktop presence. Can also be used as a 
and access notification source. 

Displayed while a 

background task is running —¥!| Fils 

to show status and provide | ye 

access to features and 

settings. oo 


In this example, the Action Center icon allows users to check its status even when it has no desktop presence. 


Temporary event status ~~ al 
Programs with desktop ta! ] i 
presence can display icons ee 
temporarily to show 


important events or In this example, icons for printing and installing updates are displayed temporarily to show important events or 
changes in status. changes in status. 


© 2010, Microsoft Corporation. All rights reserved. Page 784 of 882 


Temporary notification 
source 

Displayed temporarily to 
show a notification. 
Removed after a timeout, 
or when the underlying 
problem is addressed or 
task performed. 


Minimized single-instance 
application 

To reduce taskbar clutter, a 
single-instance, long- 
running application can be 
minimized to a notification 
area icon instead. 


Guidelines 


General 


Temporary icons are preferred for pure notification sources. Don't display an icon that doesn't provide useful, 
relevant, dynamic status just because a feature might need to display a notification in the future. 


(8 Installing device driver software * * 


Click here for status. 


In this example, the plug-and-play icon is displayed while a new hardware detected notification is shown. 


HS 10:10AM 


In this example from Windows Vista, Outlook and Windows Live™ Messenger are single-instance applications that 


minimize to notification area icons. 
Consider using this pattern only if all of the following apply: 


« The application can have only a single instance. 

« The application is run for an extended period of time. 
« The icon shows status. 

« The icon can be a notification source. 

- Doing so is optional and users must opt in. 


If all these conditions apply, minimizing to an icon eliminates having two access points when only one is 
necessary. 


Note: This icon pattern is no longer recommended for Windows 7. Use regular taskbar buttons instead if your 
program has desktop presence. 


ol3a k= 


In this example from Windows 7, a regular taskbar button takes little space, but benefits from the Windows 7 
taskbar button features, including Jump Lists, overlay icons, and rich thumbnails. 


- Provide only one notification area icon per component. 


« Use an icon with 16x16, 20x20, and 24x24 pixel versions. The larger versions are used in high-dpi display modes. 


When to show 


- For the temporary notification source pattern: 
> Windows displays the icon when the notification is displayed. 


o Remove the icon based on its notification design pattern: 


Pattern 


When to remove 


Action success When notification is removed. 


Action failure 


When problem is resolved. 


Non-critical system event |When problem is resolved. 


Optional user task When task is done. 


FYI 


When notification is removed. 


- For the temporary event status pattern, display the icon while the event is happening. 


- Forall other patterns, display the icon when the program, feature, or process is running and the icon is relevant unless the user 
has cleared its Display icon in notification area option (for more information, see Context menus). Most icons are hidden by default 
in Windows 7, but can be promoted to the notification area by the user. 
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- Don't display icons meant for administrators to standard users. Record the information in the Windows event log. 


Where to show 


- Display windows launched from notification area icons near the notification area. 


Windows launched from notification area icons are displayed near the notification area. 


Icons 


- Choose the icon based on its design pattern: 
Pattern 


Icon type 


System status and access 
Background task status and access 
Temporary notification source 
Temporary event status 


System feature icon 

Program or feature icon 
Program or feature icon 
Program or feature icon 


Minimized single-instance application 


= & 10:10 AM 
: 12/29/2008 


Program icon 


In this example, Outlook uses an e-mail feature icon for a temporary notification source and its application icon 


for the minimized application. 


- Choose an easily recognizable icon design. Prefer icons with unique outlines over square or rectangular shaped icons. Keep the 


designs simple—prefer symbols over realistic images. Apply the other Aero-style icon guidelines as well. 


« Use icon variations or overlays to indicate status or status changes. Use icon variations to show changes in quantities or strengths. 
For other types of status, use the following standard overlays. Use only a single overlay, and locate it bottom-right for consistency. 


Overlay | Status 
A Warning 


[x] [Error 
x [Disabled/ Disconnected 
9 


Blocked/ Offline 


By 10:10 AM 
=!" 12/29/2008 


In this example, the wireless and battery icons show changes in quantities or strengths. 


A 10:10 AM 
“ "=" 12/29/2008 


In this example, overlays are used to show error and warning states. 
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- Avoid swaths of pure red, yellow, and green in your base icons. To avoid confusion, reserve these colors to communicate status. If 
your branding uses these colors, consider using muted tones for your base notification area icons. 


- For progressive escalation, use icons with a progressively more emphatic appearance as the situation becomes more urgent. 
In these examples, the appearance of the battery icon becomes more emphatic as the urgency increases. 


- Don't change status too frequently. Notification area icons shouldn't appear noisy, unstable, or demand attention. The eye is 
sensitive to changes in the peripheral field of vision, so status changes need to be subtle. 
o Don't change the icon rapidly. If underlying status is changing rapidly, have the icon reflect high-level status. 


Incorrect: 


«10:10AM 


~ 12/29/2008 


In this example, the modem icon displays blinking lights (as a hardware modem does), but those state changes 
aren't significant to users. 


o Don't use long-running animations to show continuous activities. Such animations are a distraction. An icon's presence in 
the notification area sufficiently indicates continuous activity. 


o Brief, subtle animations are acceptable to show progress during important temporary, transitive status changes. 


_ 10:10AM 


12/29/2008 


In this example, the Wireless icon displays an activity indicator to show that work is in progress. 


o Don't flash the icon. Doing so is too distracting. If an event requires immediate attention, use a dialog box instead. If the 
event otherwise needs attention, use a notification. 


- Don't disable notification area icons. If the icon doesn't currently apply, remove it. However, you can show an enabled icon with 
a disabled status overlay if users can enable from the icon. 


11:30AM | 


5/1/2009 


ee call 1S 


In this example, users can enable sound output from the icon. 


For general icon guidelines and examples, see Icons. 


Interaction 
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Note: The following click events should occur on mouse up, not mouse down. 
Hover 


- Display a tooltip or infotip that indicates what the icon represents. 


Action Center 


EN jm, 10:10AM 
be 12/29/2008 jy 


In this example, a tooltip is used to describe the icon on hover. 
For infotip text guidelines, see the Text section of this article. 
Left single-click 


- Display whatever users most likely want to see, which may be: 
o A flyout window, dialog box, or program window with the most useful settings and commonly performed tasks. For 
presentation guidelines, see Notification area flyouts. 


Friday, May 01, 2009 


11:55:53 AM 


Change date and time settings... 


11:53AM 
h® 5/1/2009 


11:55 AM 


LS > 
| aall iq 5/1)8009 


In these examples, left clicking displays popup windows with the most useful settings. 


o Astatus flyout. 


Ws Backup in progress 


You can use Action Center to review recent 
messages about your computer's status and 
find solutions to problems. 


Open Action Center 


In this example, left clicking displays the status flyout. 
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> The related control panel item. 
o The context menu. 
Users expect left single-clicks to display something, so not displaying anything makes a notification area icon appear unresponsive. 


- Display a context menu only if the other choices don't apply, with the default command in bold. In this case, display the same 
context menu that is shown on right-click to avoid confusion. 


- Prefer using a popup window over a dialog box for a more lightweight feel. Show only the most common settings and have them 
take immediate effect for a simpler interaction. Dismiss the popup window if the user clicks anywhere outside the window. 


- Display small windows near the associated icon. However, large windows such as control panel items can be displayed in the center 
of the default monitor. 


Left double-click 


- Perform the default command on the context menu. Typically, this displays the primary UI associated with the icon, such as 
the associated control panel item, property sheet, or program window. 


« If there is no default command, perform the same action as a left single-click. 
Right-click 

- Display the context menu, with the default command in bold. 
Context menus 


- Display the context menu near its associated icon, but away from the taskbar. 
« The context menu may include the following items, as appropriate, in the listed order (exact text is in quotes): 


Primary commands 
Open (default, list first, in bold) 
Run 
Secondary commands 
<separator> 
Suspend/resume enable/disable command (check mark) 
"Minimized to notification area" (check mark) 
Opt in to notifications (check mark) 
"Display icon in notification area" (check mark) 
<separator> 
"Options" 
"Exit" 


« Remove rather than disable any context menu items that don't apply. 
- For Open, Run, and Suspend/Resume commands, be specific about what is being opened, run, suspended, and resumed. 


Open Windows Defender 
Run a Scan 
¥ Enable Real-time Protection 


Disable Real-time Protection 


Shutdown Windows Defender 


#8 10:10 AM 


In this example, Windows Defender has specific Open and Run commands. 


- Use Suspend/ Resume running background tasks, Enable/ Disable for everything else. 
« Use check marks to indicate state. List and enable all states and place the check mark next to the current state. Don't disable options 
or change option labels to indicate the current state. 


Correct: 
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Open Windows Defender 
Run a Scan 

v¥_ Enable Real-time Protection 
Disable Real-time Protection 


Shutdown Windows Defender 


10:10 AM 


Incorrect: 


Open Windows Defender 
Run a Scan 
Enable Real-time Protection 


Disable Real-time Protection tS 


Shutdown Windows Defender 


#8 10:10 AM 


In the incorrect example, Windows Defender should use a check mark to indicate the current state. 


All background tasks must have a Suspend/ Resume command. Choosing the command should temporarily suspend the task. 
Users may want to temporarily suspend background tasks to increase system performance or reduce power consumption. 
Suspended background tasks are restarted when resumed by the user or when Windows is restarted. 


- Allow users to opt into or out of different notification types if your program has notifications that some users might not want to 
see. The FYI notification pattern requires users to opt in, so these notifications must be disabled by default. 


Show Microsoft Exchange Messages 
Show Network Warnings 
Show Network Connectivity Changes 


mal | ||) [5 [ac 


Show New Mail Desktop Alert 


Hide When Minimized 
Open Outlook 


Cancel Server Request 


= |P iz 


10:10AM | 
12/29/2008 


In this example, Outlook allows users to choose the notifications they receive from the icon. 


Clearing the "Display icon in notification area" option removes the icon from the notification area, but doesn't affect the 
underlying program, feature, or process. Users can redisplay the icon from the program's Options dialog box. Don't automatically 
re-display the icon when Windows is restarted. 


The Exit command quits the program for the current Windows session and removes the icon. Don't have an Exit command if 
program can't be shut down. The program is restarted when Windows is restarted. Users can permanently quit the program from 
the Options dialog box. 


Don't have an About command. Such information should be communicated by the icon, its infotip, and the context menu. If users 
want more information, they can view the primary UI. 
o Exception: You may provide an About command if the icon is for a program that doesn't have desktop presence. 


For general context menu guidelines and examples, see Menus. 
Rich tooltips 


« Use rich tooltips only to make the information easier to understand. Don't use rich tooltips just to decorate the feature. If you 
can't use richness to make the information easier to understand, use a plain tooltip instead. 


Incorrect: 
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10:10 AM a 


= /2/22008 al 


Correct: 


10:10 AM 
12/2208 al 


In the incorrect example, the calendar icon doesn't make the date easier to understand. 


« Use a concise presentation. Use concise text and a concise layout with a 32x32 pixel icon. Spacious tooltips risk being 
distracting, especially when displayed unintentionally. 


- Don't put controls or elements that appear interactive in a rich tooltip. Tooltips aren't interactive and therefore shouldn't 
appear interactive. Don't use blue or underlined text. 


Correct: 


| 97% available (plugged in, charging) 


Current power plan: Default 


“i 10:10 AM 


Incorrect: 


| 97% available (plugged in, charging) 


Current power plan: Default 


ce 20:0 AM 
“ye 12/29/2008 


In the incorrect example, the current power plan appears to bea link, but it is impossible to click. 
Notification area flyouts 


« When appropriate, present notification area flyouts with three sections: 
o Summary. Display the same information that is displayed in the icon's tooltip or infotip, possibly with more detail. For consistency, 
use the same text and icons, and generally the same layout (if using a rich tooltip). Unlike the infotips, this information is 
accessible when using touch. 


o Common tasks. Present the most commonly performed tasks directly in the flyout. 


o Related links. Provide at most one of each type of the following optional links: 
= Alink to the most frequently performed task in Control Panel. Provide if there is a frequently performed task that can't be presented 
in the common tasks section. 


a Alink to the related Control Panel item. This Control Panel item should allow users to perform any tasks that can't be performed in 
the common tasks section. 


= Alinkto a specific, relevant Help topic. Follow the standard Help link guidelines. 
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J 2 hr 00 min (32%) remaining 


Select a power plan: 
@ Balanced 


© Power saver 


Adjust screen brightness 
More power options 


This example shows a notification area flyout using the recommended presentation. 
Options dialog box 


« Options not accessible directly from the context menu must be in the Options dialog box. This dialog could be the feature's 
control panel. 


- The Options dialog box may include the following items as appropriate (exact text is in quotes): 
o Enable [feature name] (check box) 
= Clearing this option permanently quits the program. Program can be restarted from its control panel item. The Exit command in 
the context menu quits the program only for the current Windows session. 


o "Display icon in notification area" (check box) 
a Removing the icon from the notification area doesn't affect the underlying feature. 


= Selecting this option allows user to restore the icon, which of course can't be done from the icon itself. 
- Disable features that are rarely used, or potentially annoying or distracting. Let users opt in to such features. 


For general Options dialog box guidelines and examples, see Property Windows. 


Minimizing programs to the notification area 


Note: Minimizing program windows to the notification area is no longer recommended for Windows 7. Use 
regular taskbar buttons instead. Your program may support both mechanisms for backward compatibility. 


« To reduce taskbar clutter, consider providing the ability to minimize programs to the notification area only if all of the following apply: 
o The program can have only a single instance. 


o The program is run for an extended period of time. 
o The icon shows status. 

o The icon can be a notification source. 

o Doing so is optional and users must opt in. 


« Use the Minimize button on the application's title bar, not the Close button. 
Text 
Infotips 


« The icon infotip should have one of the following formats (where the company name is optional): 
o (Company name) Feature, program, or device name 


Microsoft Office Outlook 


o (Company name) Feature, program, or device name status statement. 
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Microsoft Office Outlook is synchronizing folders. 


e:/\u—= 10:10AM 
S| 
b= 12/29/2008 yy) 


o (Company name) Feature, program, or device name 
Status list with each item on a separate line 


Wireless Networking Connection (WLAN) 
Speed: 11.0Mbps 

Signal Strength: Excellent 

Status: Connected 

| 


‘i 10:10 AM 
12/29/2008 jj 


Infotip phrasing: 


- Focus on the most useful information. Display other information on left single-click. 

- Be concise. Use sentence fragments or simple statements. 

- Don't use ending punctuation unless tip is phrased as a complete sentence. 

« Omit unnecessary words. Don't include the software version or other extraneous information. 


Incorrect: 


Master Volume (Fabrikam 11BB/CAM-A99Audio Controller) 


10:10AM | 


i@) 
12/29/2008 jus 


In this example, the infotip has extraneous information. 


« Don't explain how to interact with the icon. 


Incorrect: 


Wireless Networking Connection 
Not connected. Right-click here for more options. 


10:10 AM 
bh 12/29/2008 


In this example, the Wireless Network Connection icon gives right-click instructions. 
Documentation 
When referring to the notification area: 
- Refer to the notification area as the notification area, not the system tray. 
When referring to a notification area icon: 


« Refer to the icon using the exact name given in its infotip, including its capitalization, followed by icon. 
« For the first reference, also refer to the notification area. 
« When possible, format the heading text using bold. Otherwise, put the heading in quotation marks only if required to prevent confusion. 


Example: To check the network status quickly, click the Network icon in the notification area. 
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Windows Desktop Gadgets 


Use gadgets to give users fast access to personally relevant information and simple tasks. Great gadgets do a 
single, well-defined task very well. 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Controls 
States 
Interaction 
Animation and sound 
Options dialog boxes 
Windows integration 
Recommended sizing and spacing 
Documentation 


Gadgets are simple mini-applications that give users fast access to personally relevant information and simple 
tasks—without getting in the way. For example, the Weather Gadget provides real-time information that is 
available at a glance, and the CPU M eter Gadget provides system information that users are interested in 
monitoring. Gadgets are visually attractive and optimized to do a single task very well. 


Gadgets are part of the desktop, like the Start button, taskbar, and notification area. Unlike normal windows, 
they aren't represented with a taskbar button. 


In Windows Vista® gadgets are normally hosted in the Sidebar, which is a region on the side of the desktop. 
Besides being attached to, or docked, in the Sidebar, gadgets can also be detached from the Sidebar to float 
anywhere on the desktop. 


In Windows 7, there is no Sidebar, so gadgets can be moved freely to any location on the desktop that the user 
chooses. By default, they are snapped into place along the screen edge to keep them organized. 


A gadget has two sizes: small and large. The small size is used to display the information concisely, whereas the 
large size displays the information in detail. In Windows Vista, these sizes correspond to whether they are docked 
or floating. When docked, they run in their small size, and when floating they run in their large size. By default in 
both Windows Vista and Windows 7, the gadget is added to the desktop in its concise, docked state. 


These guidelines apply to both Windows Vista and Windows 7 gadgets. You can develop a single gadget that runs 
on both versions of Windows; however, there are some new features in Windows 7 that you should consider. 
One difference when designing for Windows 7 is that you should expect gadgets to be displayed in detailed states 
more often. 


Gadgets can have flyouts that temporarily show more information. Flyouts are displayed by clicking the gadget, 
and dismissed by clicking anywhere outside the flyout. Flyouts work with either gadget size. 


Finally, gadgets can have an options dialog box for settings and customization. 
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= a 
Health care where less is more 


Read onine 


Ih an industry that makes Ks money by seling 
more ~ more tests, more surgeries, more drugs - 
- Gesinger Heath System officals garnbied that 
they could succeed by doing less, but dong £ 
better. 


‘ _ 
155 GSGSGGRGT 
| Thursday r 


_ a April 2009 ‘ 
Se we a ~ 
a ] O15 PM 


4/9/2009 


. 


In this example, the Weather Gadget (lower left) shows weather information, and the RSS Gadget (center right) is 
shown with a blog headline flyout. 


Weather 


Current location: 
Redmond, Washington 


Select current location 


How is current location found automatically? 


Show temperature in: 
@ Fahrenheit 
© Celsius 


An example of an options dialog box. 


Developers: You can learn how to create gadgets with the Gadget Development Overview. 


Note: Guidelines related to the layout are presented in a separate article. 
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Is this the right user interface? 
To decide, consider these questions: 


- Does the functionality always need to be readily available? Only the most frequently used functionality that users must access 
quickly should be put in gadgets. 


- Is the functionality of great interest to your users? Users will only dedicate part of their screen to display information that they want 
to see quickly and often. 


- Does the information change regularly? If not, users will not dedicate part of their screen for it. 


- Isthe purpose to launch a program or promote awareness of it? If so, use the Start menu instead. Gadgets are not for 
program launching, nor for program advertisements. 
- Isthe purpose to provide notifications? Use a notification instead. 


- Isthe purpose to show progress? Use a progress dialog instead. 


Design concepts 
There are several keys to a successful gadget. 


A good gadget provides functionality that is useful all the time. If not, users are likely to close the gadget to 
make the most of their limited desktop space. Gadgets are especially useful for monitoring information, providing 
functionality that is used throughout the day, and for fun activities like puzzles. 


An effective gadget works well in the periphery. Its functionality is easily accessible, but not distracting. 
Remember that gadgets are shown on the desktop all the time but aren't actively used all the time. You want 
users to stay focused on their main task. Users will learn where to find your gadget through visual and motor 
memory, and will be able to access it quickly when needed. 


A great gadget does a single, well-defined task very well. Omit extraneous functionality, and make core 
functionality very easy to access. Use large fonts for the most important information and ensure that the most 
common activity requires very few clicks. It's better to have multiple gadgets optimized for a single task than one 
gadget that tries to do everything. By doing so, you give users more control over the functionality they use. 


Incorrect: 


Tuesday, April 9, 2009 


Correct: 
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April 2009 


In the incorrect example, the all-in-one gadget is trying to do several things, but it does none of them well. The 
single-task gadgets do their tasks better and also give users more control over the functionality they use. 


The best gadgets use a visual theme that suitably indicates their singular task. Avoid making the gadget look like 
a box with a label, an icon, and content. Use meaningful illustrations that convey important information. If your 
gadget has the functionality of a real appliance, design the gadget to look like or suggest that appliance. For 
example, make a clock gadget look like a real clock, and a calendar gadget like a real calendar. 


When there isn't a direct mapping, try to use visual elements from a real world object that are closely related in a 
few key ways. For example, a CPU meter can look like a speedometer because they both indicate performance. A 
currency converter can look like a credit card because they both relate to currency and travel. While these loose 
analogies are sometimes hard to find, they can make your gadget visually stimulating and uniquely attractive. 


Acceptable: 


US Dollar 


Better: 


US DOLLAR ¥ 


DATA PROVIDERS 


In the better example, the gadget uses a credit card metaphor to allude to currency and travel, with a world map 
background that supports this theme. It also uses uppercase text patterned after the text found on credit cards. By 
contrast, the first example gadget is a simple box with two fields. Although it displays the information, it is not as 
rich and compelling as the recommended example. 
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If there is no suitable visual theme, you can use color and shape to demonstrate its purpose visually. 


In this example, the gadget uses shapes and colors to indicate the direction in which stocks and market indices are 
moving. 


Lastly, regardless of what visual styles you choose, make your gadget visually attractive. The desktop is prime 
screen space, and is often seen by users. If you can, work with a professional designer to find an appropriate 
visual theme and make your gadget look great. 


Compared to other Microsoft ®Windows®areas, gadgets are especially freeform. There isn't a fixed set of 
building blocks that can be combined to create a standard looking user interface. This flexibility makes it possible 
to create uniquely great gadgets, as well as not-so-great ones. Make your gadget unique through its 
functionality and visualization, but use standard Windows interactions. 


If you do only five things... 

1. Perform a single, well-defined task very well. 

2. Provide functionality that is useful all the time. 

3. Make sure the gadget works well in the periphery by being quickly accessible while not being distracting. 
4. Use a visually attractive theme that indicates the gadget's singular task. 

5. Make your gadget unique through its functionality and visualization, but use standard interactions. 


Usage patterns 


Gadgets have several usage patterns: 


Information gadgets 
display timely, often 
aggregated information 
that changes throughout 
the day. 


oh eh oe 


This gadget shows up-to-date weather conditions. 


Utility gadgets 
provide functionality that is 
useful throughout the day. 
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12 13 14 15 
19 0 2i 22 


April 2009 


Users can quickly view a calendar. 


Fun gadgets Fun gadgets are often more distracting than other types of gadgets. As a result, users are likely to change them 
give users a fun way to pass_more frequently. 
time. 


This picture puzzle gadget is an example of a game to pass time. 
It's important to keep these patterns separated. It's easy to imagine a fun utility gadget becoming tiresome after 
a couple weeks, or simply taking up more screen space than is justified. 
Guidelines 


Controls 


- Have controls appear on hover. In the default state, show only what's necessary. M ost controls can be hidden until users hover 
the pointer over the gadget. This way you can draw attention to the most important parts of the gadget for both states. 


In this example, it's more important for users to read the data in the gadget's passive state. The controls at the 
bottom of the gadget are hidden until users interact with it. 


- Use tooltips to display all control labels because there isn't enough space for labels. For more guidelines, see Tooltips. 
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Add a stock symbol 


An example of a tooltip with a control label. 


- Use controls that behave like common controls, but are themed appropriately for your gadget. Choose colors that match the visuals 
of your gadget. Due to size constraints, you may need to make controls smaller than the standard common control sizes. 


Microsoft Corp 


Dow Jones Industrial Average ... 


NASDAQ Composite Index 
S&P 500 INDEX 


Nikkei 225 


The Stocks Gadget uses a custom scrollbar that is smaller and has a color that matches the gadget. 


- Use standard glyphs for commands. If a command isn't represented by a standard glyph, create an appropriate glyph that has 


a consistent style. You may need to adjust the color and brightness of the glyphs depending on the gadget surface. All glyphs 
should have a rest, hover, and down state. They should commit on mouse up so that users can change their mind. 


add + (+) & 

delete x x OK 

close x x) & 
chevron » » » 
expand down vv w& 
expand up A A A 


Examples of standard glyphs for common tasks in gadgets. 


- Avoid using scrollbars by default. Instead, make default content fit comfortably within the gadget. For user customized content: 
o If necessary, use vertical scrollbars. 


o Consider using pagination if space is at a premium and it's not important for users to have complete control over content position. 
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Health care where less is more 


Insurgent threat shifts in Pakistan 


Blame for downturn not fixed on Obama 


Stanford star nearly outscores lowa St. i.. 


In this gadget, users can page through four headlines at a time. 


o Consider truncating content if doing so still provides useful information, such as the first few lines of an e-mail message. Show the 
complete content in a flyout or link to the associated application. 


- Use Segoe Ul, the Windows system font, for gadget text. 


States 


- Expose core functionality in the concise/ docked state. Design gadgets assuming that they are always run in the concise/ docked 


state. Consider the target audience, key scenarios, space constraints, and simplicity when determining core functionality. 


- Use the detailed/ floating state to provide extra functionality, but don't do so gratuitously. Link to your application or Web site 
for complex tasks that require full attention or are more time intensive, instead of trying to embed them in your gadget. If there is 


no need to add extra functionality, make the concise/ docked and detailed/floating states the same. 


Health care where less is more 


Insurgent threat shifts in Pakistan 


Blame for downturn not fixed on Obama 


Stanford star nearly outscores lowa St. i... 


In this example, the detailed/floating and concise/ docked have the same functionality, but the detailed/floating 


gadget shows more content. 


- Use the same drop shadow for both states to ensure that they align properly when placed along the screen edge. 


Health care where le... 


Insurgent threat shift... 


Blame for downturn ... 


Stanford star nearly ... 


- Use flyouts to display secondary information and functionality transiently. If the information and functionality always needs to 
be available, put it directly on the gadget—don't put it in a flyout. Also, don't use flyouts for options; use an options dialog box instead. 


The following table compares the appropriate functionality for concise/docked gadgets, detailed/floating 


gadgets, flyouts, and full applications: 


State Appropriate functionality 


Concise/docked {Core functionality that is always useful. 
Detailed/floating | Additional functionality that is always useful. 


Flyout Secondary functionality that is sometimes useful. 
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Use similar appearance and interaction for the concise/ docked and detailed/ floating states. Users may be confused if the 
concise/ docked and detailed/floating gadgets look and behave very differently. While the space constraints for the concise/ docked 
state may require a more compact layout, try to keep the interactive components in roughly the same place. In both states, the 
same actions should have the same results. 


On installation, consider having the gadget perform an action that demonstrates its purpose. Doing so will make the gadget feel 
alive and self-explanatory. For example, a calendar gadget could turn the pages to today's date. 


Avoid initial gadget configuration. Choose the most likely or convenient default options. Requiring an initial configuration will make 
a gadget feel too heavy. 


Provide feedback for the loading and offline states. Let users know that your gadget is offline or loading. 
o For the loading state, use an activity indicator with text that explains what is loading, such as "Getting data...". 


o For the offline state, use a 16x16 pixel information icon with "Service not available" or other appropriate text. If necessary, make the 
gadget recognizable by showing faded placeholder content or cached data. Gadgets should activate automatically when a connection 
becomes available. 


While gadgets may reflect loss of connectivity, they don't have to draw attention to it because users are likely to 
discover connectivity loss through traditional means, such as the network notification area icon or their Web 
browser. 


(7) Service not available 


< Getting data... | 


available 


Text and icon are centered in the gadget 4 pixels between text and icon 


Text and icon vertically centered 


: 
- 


Example of multi-line text 


available — 


All text is Segoe UI 12 pixels, line spacing is 14 pixels, all at 96 dpi 


These examples show offline and loading states. 


- Maintain state across sessions. Users expect to find the gadget in the state they left it after last using their computer. For example, 
a partially solved puzzle should stay partially solved. 


© 2010, Microsoft Corporation. All rights reserved. Page 802 of 882 


Interaction 


- Use the standard Windows pointer behavior. For example, use the hand pointer only for links. 


- Don't automatically change a gadget's size. Automatic size changes confuse and annoy users, because changing one gadget's 
size causes the other gadgets either to move (with the Windows Vista Sidebar), or potentially to overlap or go off-screen (with 
Windows 7). Never change size on hover. When necessary, you can change size on click. 

- To the best extent possible, design your gadget to eliminate the need for error handling and other types of messages. These 

messages are contrary to the lightweight feel of gadgets. 

If you must give an error, warning, or informational message, show the message in-place or as a different gadget state. Don't 

use dialog boxes for these messages. Show the message along with the appropriate 16x16 pixel standard icon for error and 

warning messages. Use no icon at all for minor user input problems. 


No items match 
your search. 


|Fabrikam 


In this example, the in-place user input problem needs no icon. 


For more guidelines on error, warning, and information message icons, see Standard Icons. 
- Don't provide Help for your gadget. M ake sure the design is self-explanatory instead. 


Animation and sound 


- Use animation judiciously. Avoid gratuitous and distracting animation. The human eye is sensitive to motion, especially 
peripheral motion. When updating information, it is better to do it inconspicuously and wait for users to notice it at will. If you 
use animation to draw attention to something, make sure that attention is well deserved and worthy of interrupting the user's train 
of thought. A transition, such as a cross fade, may make the update feel smoother, but it may also attract undue attention. Find the 
right balance between smoothness and impact by testing the gadget and tweaking variables such as animation speed and surface 
area. Animation that is triggered by a specific user action is encouraged. When used properly, it can make the gadget feel smooth 
and polished. 


- Use sound judiciously. Don't distract users with sounds. Use sound sparingly and only on user interaction. For more guidelines, 
see Sound. 


Options dialog boxes 


- Use an options dialog box only if needed. Some gadgets don't need options. Useful options include personalization and 
feature customization, such as adding and removing content. Consider letting users adjust settings directly on the gadget if the 
options dialog box would duplicate much of the gadget. For example, users may expect to reorder items directly in a list by using 
drag-and-drop. Providing this functionality in the options dialog box might duplicate much of the gadget while making it harder for 
users to visualize the end result. 


- Don't provide options in flyouts. 
- Provide access to the options dialog box through the Options button on the gadget. 
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—— Close button 
—— Size button 
—— Options button 


—— Handle 


The options dialog box is accessed through the Options button in the upper-right corner of the gadget. 


- Make the options dialog box look like property windows, but without tabs. Keep the options limited to a single page without a 
scroll bar. Follow the general layout guidelines for control placement in the dialog box. 


Windows integration 


- For Windows 7 programs that install gadgets: 
o Provide an option during program setup to install the gadget. 


o Present the option unselected by default. 
o If users select the option, install only a single gadget. 


o If the gadget is useful only after the program has been run by the user, install the gadget after first run instead of at setup. For 
example, a gadget that shows the most recent mail isn't relevant until users set up their mail account. 


- Consider extending your gadget to Windows SideShow. 


Recommended sizing and spacing 


- Gadgets in the concise/ docked state are 130 pixels wide. Include 5 pixels of drop shadow, 2 pixels on the left side and 3 on the right. 


- Gadgets in the concise/ docked state should have a minimum height of 84 pixels and have a recommended maximum height of 
200 pixels. A gadget that uses space efficiently is more likely to be used. 


- Gadgets in the detailed/ floating state should be no larger than 400x400 pixels. 
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i 

Oo 6O©f 

fe] : 

= | 4 

4. 4 

a 

— Minimun — 

= 84 pixels 


Detailed/floating 


Concise/docked 


Recommended max = 400 pixels 
+—_————_Recommended max——+! 
= 200 pixels 


130 pixels _—! 


The concise/docked width of 130 pixels 


includes 5 pixels of drop shadow, 
+—__—_—_——Recommended max = 400 pixels ———______+ 2 pixels on the left side and 3 on the right. 


—$— ______ 


5 ances esOrTaTTTPOTDonenTnnSenTonTeTToroetTTUcarooTnTteetoneannnconeeremnecenreonnTerarosttaveonssnereessoooraTavesterrrntecentemntTTertoTTTTversont=ToottoTRMTTNE NT DCTRNRERTTTETTTPTETorsoses et 


Recommended sizing for gadgets in the detailed/floating and concise/ docked states. 


- Options dialog boxes have a client area of 278 pixels wide and are no more than 400 pixels high. The height should be adjusted 
to accommodate its controls without exceeding 400 pixels. 


- Options dialog box text is Segoe UI 12 pixels, with a line spacing of 14 pixels at 96 dpi. 


400 pixels ————_++ 


' 
Pieineneeteantinndmnen nanan a a 


Recommended max 


‘Clock name: 


1 zone: i 
; Current computer time vi 


("| Show the second hand 


OK 
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{__—_____078 pixels + 
Recommended sizing for an options dialog box. 
Documentation 
When referring to Windows Desktop Gadgets: 


Refer to the gadgets feature as Windows Desktop Gadgets. 


Refer to specific gadgets by name, followed by Gadget, where Gadget is capitalized. 
Examples: Weather Gadget, CPU M eter Gadget. 


Don't capitalize gadget when referring to it generically. 
Example: Dock the gadget by default. 


Use Sidebar only with respect to gadgets running on Windows Vista. Always capitalize references to the Sidebar. 


Always capitalize references to the Gadget Gallery. 
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Control Panels 


Use control panel items to help users configure system-level features and perform related tasks. Programs that 
have a user interface should be configured directly from their UI instead. 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Property sheet control panel items 
Task flow control panel items 
General 
Task links and buttons 
Dialog boxes 
Hub pages 
General 
Object lists 
Interaction 
Task panes 
See also links 
Spoke pages 
General 
Interaction 
Interaction (intermediate spoke pages) 
Interaction (final spoke pages) 
Commit buttons 
Preview buttons 
Live previews 
Apply buttons 
Control panel integration 
Category pages 
Task links 
Search terms 
Standard users and Protected administrators 
Schemes and themes 
Miscellaneous 
Default values 
Text 
Documentation 


With Control Panel in Microsoft ®Windows® users can configure system-level features and perform related tasks. 


Examples of system-level feature configuration include hardware and software setup and configuration, security, 
system maintenance, and user account management. 


The term Control Panel refers to the entire Windows Control Panel feature. Individual control panels are referred 
to as control panel items. A control panel item is considered top-level when it is directly accessible from the 
control panel home page or a category page. See Category pages for the criteria required to be a top-level 
control panel item. 
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GvU- & « Ease of Access > Speech Recognition v | + 


a Ee Configure your Speech Recognition experience 


Advanced speech options ie Start Speech Recognition 
w 


Text to Speech Start using your voice to control your computer. 


() Set up microphone 
» Set up your computer to work properly with Speech 
Recognition. 


2 Take Speech Tutorial 


Learn to use your computer with speech. Learn basic 
commands and dictation. 


Train your computer to better understand you 


Read text to your computer to improve your computer's 
ability to understand your voice. Doing this isn't 
necessary, but can help improve dictation accuracy. 


Sealed + Open the Speech Reference Card 
: FA View and print a list of common commands to keep with 
pei eine you so you always know what to say. 


Audio Devices 


A typical control panel item. 


The control panel home page is the main entry point for all control panel items. It lists the items by their 
category, along with the most common tasks. It is displayed when users click Control Panel in the Start menu. 


A control panel category page lists the items within a single category, along with the most common tasks. It is 
displayed when users click a category name on the home page. 


Control panel items are implemented using task flows or property sheets. For Windows Vista®and later, task 
flows are the preferred user interface (U1). 


Developers: To learn how to create control panel items, see Control Panel Items. 


Note: Guidelines related to property sheets are presented in a separate article. 


Is this the right user interface? 
To decide, consider these questions: 


- Is the purpose to configure system-level features? If not, use another integration point. Make your application features 
configurable directly from the UI using options dialog boxes, instead of using Control Panel. For utilities that aren't used for 
setup, configuration, or related tasks (like troubleshooting), use the Start menu as the integration point. 


Does the system-level feature have its own UI? If so, that Ul is where users should go to make changes. For example, a system 
backup utility should be configured from its program options instead of from Control Panel. 


- Will users need to change the configuration often? If so (say, several times a week), consider alternative solutions, perhaps in 
addition to using Control Panel. For example, the Windows master volume setting can be configured directly from its icon in 
the notification area. Some settings can be configured automatically. In Windows Explorer, for example, the Compatibility tab 
for application properties allows an application to be run in 256 color mode instead of requiring users to change the video 
mode manually. 


- Are the target users IT professionals? If so, use a Microsoft Management Console (MMC) snap-in instead, which is designed 
specifically for system management tasks. In some cases, the best solution is to have both a control panel item for general users and 
an MMCsnap-in for IT professionals. 
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x» Computer Management 
File Action View Help 


9/26) csl/bB 


& Computer Management (Local) 
4 it} System Tools 
@ Task Scheduler 
{@] Event Viewer 
Shared Folders 
4 & Local Users and Groups 
(9) Users 
(5) Groups 
red Reliability and Performance 
a Device Manager 
4 &% Storage 
f=? Disk Management 


> Ely Services and Applications 


Name 


& Event Log Read... 


& Guests 

@e is _Iusrs 

@® Network Confi... 
& Performance L... 


@ Performance M... 


& Power Users 


@& Remote Deskto... 


@ Replicator 


@® Users 


& Offer Remote A... 


@ sQLServer2005... 
@ sQLServer2005... 


Description 


Members of this g... 


Guests have the s... 


Built-in group use... 
Members in this g... 
Members of this g... 
Members of this g... 
Power Users are in... 
Members in this g... 
Supports file repli... 

Users are prevente... 
Members in this g... 
Members in the g... 

Members in the g... 


Actions 


Groups a 


More Actions > 


@ sQLServer2005... 


< | m | » 


Members in the g... 


In this example, the Local Users and Groups MMC snap-in provides user management targeted at IT professionals. 
Other users are more likely to use the User Accounts item in Control Panel. 


- Isthe feature an OEM feature used only during initial system configuration? If so, use the Windows Welcome Center as the 
integration point. 


Control panel items are necessary because many system-level features don't have a more obvious or direct 
integration point. Yet Control Panel shouldn't be viewed as the "one place" for all configuration settings. 
Programs that have a user interface should be configured directly from their UI instead of using control panel 
items. 


Incorrect: 
s . 
Internet Options 


Change yourhomepage | Manage browser add-ons | Delete browsing history and cookies 


In this example, Windows Internet Explorer @shouldn't be represented in Control Panel, because its own Ul isa 
better integration point. 


Create a new control panel item or extend an existing one? 
To decide, consider these questions: 


- Can the functionality be expressed as tasks that can plug into an existing, extensible control panel item? The following control 
panel items are extensible: Bluetooth Devices, Display, Internet, Keyboard, M ouse, Network, Power, System, Wireless (infrared). 


- Do the properties and tasks replace the features of the existing extensible control panel item? If so, you should extend the 
existing control panel item because that results in a simpler user experience. If not, create a new control panel item. 


Design concepts 


The Control Panel concept is based on a real-world metaphor. A real-world contro! panel is a collection of 
controls (knobs, switches, gauges, and displays) used to monitor and control a device. Users of such control 
panels often need training to understand how to use them. 


Unlike their real-world counterparts, Windows control panel designs are optimized for first-time users. Users 
don't perform most control panel tasks very often, so they usually don't remember how to do them and 
effectively have to relearn them every time. 


To design a control panel item that is useful and easy to use: 


- Make sure the properties are necessary. 
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- Present properties in terms of user goals instead of technology. 
- Present properties at the right level. 

- Design pages for specific tasks. 

- Design pages for Standard users and Protected administrators. 


When designing and evaluating items to include in Control Panel, determine the common tasks that users 
perform and make sure there is a clear path to perform those tasks. Users typically perform the following types 
of tasks with control panel items: 


- Initial configuration 

- Infrequent changes (for most settings) 

- Frequent changes (for a few important settings) 

- Rolling back settings to an initial or previous state 
- Troubleshooting 


If you do only one thing... 
Design control panel pages for specific tasks, and present them in terms of user goals instead of technology. 


Usage patterns 
For control panel items, you can use a task flow or a property sheet. Here are their usage patterns: 
Task flow patterns 


Task flow items use a hub page to present the high-level choices, and spoke pages to perform the actual 
configuration. 


Hub pages 


- Task-based hub pages. These hub pages present the most commonly used tasks. They are best used for a few commonly used 
or important tasks where users need more guidance and explanation. Hub pages don't have commit buttons. Hybrid task-based 
hub pages also have some properties or commands directly on them. Hybrid hub pages are strongly recommended when users are 
most likely to use Control Panel to access those properties and commands. 


- Object-based hub pages. These hub pages present the available objects using a list view control. They are best used when there 
could be several objects. Hub pages don't have commit buttons. 


Spoke pages 


- Task pages. These spoke pages present a task or a step in a task with a specific, task-based main instruction. They are best used for 
tasks that benefit from additional guidance and explanation. 


. Form pages. These spoke pages present a collection of related properties and tasks based on a general main instruction. They are 
best used for features that have many properties and benefit from a direct, single-page presentation, such as advanced properties. 


Property sheet patterns 


- Property sheets are best used in legacy items with many settings targeted at advanced users. New items can achieve the same 
effect with a task flow using the form page pattern. 


For more information and examples, see Control Panel Patterns. 


Guidelines 
Property sheet control panel items 


- Don't use property sheets for new control panel items. Instead, use task flows to create a seamless experience and make full use of 
the categorization and search functionality of the control panel home page. 


Task flow control panel items 
General 


- Keep the most important content and controls visible without scrolling. Users won't scroll to see page content unless they have 
a reason to. You can make commit buttons always visible by placing them in a command area instead of the content area. Don't 
break up pages just to avoid scrolling. 
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o Don't use horizontal scrolling. Instead, redesign the page content and use vertical scrolling. Pages may have horizontal scrollbars 
only when made very narrow. 


- To navigate between pages: 
o Use task links to start a task. 


o Use task links or a Next button to navigate to the next page in a multi-step task. 

o Use commit buttons to complete a task. 

o Use the Back button in the menu bar to return to previously viewed pages. Do not add a Back button to the command area. 
o Use the Address bar to return directly to the control panel home page. 


o Use See also links in the task pane to navigate to pages in other control panel items. Otherwise, navigation should stay within a 
single control panel item. 


- Put only the control panel home page in the Address bar. Clicking that link returns to the control panel home page, abandoning 
any work in progress without a confirmation. 


- Don't put a Close command button on control panel pages. Users can close a control panel window using the Close button on the 
title bar. 


Task links and buttons 


. When a page has a small set of fixed options, use task links instead of a combination of radio buttons and a Next button. This 
allows users to select a response with a single click. 


- You can put task links and buttons in the following places (in order of discoverability): 
o The command area (for command buttons on spoke pages only). 


o The content area: 
= Command buttons 


= Task links 
= Other links 
o Links in the task pane (hub pages only). 


- Base the location of task links and buttons on importance and need for discoverability. 
o Put only commit buttons in the command area. 


o Put essential tasks in the content area. Command buttons tend to draw the most attention, so reserve them for commands users 
must see. Task links also draw attention, but less than command buttons. 


o Reserve the task pane and plain links for secondary (less important) tasks. The task pane is the least discoverable area of a task 
page, and plain links aren't as visible as command buttons and task links. 


For task links presented in the content area: 
o Ifthere are more than seven links, group the links into categories. Provide headings for each of the groups. 


o For fewer than seven links, present the links in a single group without a heading. 
Present task links and buttons in a logical order. List task links vertically, command buttons horizontally. 


Within categories, divide the commands into related groups. Present the task groups by placing the most commonly used first, 
and within each group, place the most commonly used tasks first. The resulting order should roughly follow the likelihood of use, 
but also have a logical flow. 

o Exception: Task links that result in doing everything should be placed first. 


If there are many task links, give the most important tasks a more prominent appearance by using a 24x24 pixel icon and two lines 
of text. For less important tasks, use a 16x16 pixel icon, or no icon, and a single line of link text. 


View your active networks Connect or disconnect 
jp corp.microsoft.com Access type: Local and Internet 
Domain network Connections: ) Local Area Connection 


Change your networking settings 


ie Set up a new connection or network 


Set up a wireless, broadband, dial-up, ad hoc, or VPN connection; or set up a router or access point. 


y Connect to a network 
Connect or reconnect to a wireless, wired, dial-up, or VPN network connection. 
4 Choose homegroup and sharing options 


e 
Access files and printers located on other network computers, or change sharing settings. 


@) Fix a network problem 
Diagnose and repair network problems, or get troubleshooting information. 
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In this example, important commands are given a more prominent appearance. 


- Have clear physical separation between frequently used commands and destructive commands. Otherwise, users might 
click destructive commands accidentally. You may need to reorder your commands somewhat to put destructive commands together. 


- Provide the mechanism to undo commands directly on the page. Users shouldn't have to navigate somewhere else to undo a mistake. 


- For task links, use either all default task link icons or all custom icons. Don't mix them. Consider using custom icons only if: 
o They aid users in comprehending the tasks. 


o They comply with the Aero icon standards. 
o They have an unobtrusive appearance. 


Dialog boxes 


When using task flows, you generally want a task to flow from page to page within a single window, but the 
following circumstances are exceptions. 


- Use dialog boxes in the following circumstances: 
o To prompt users for an administrator user name and password. Always use the credential manager dialog box for this purpose. 


(Should be modal.) 
o To confirm an in-place command using a task dialog or message box. (Should be modal.) 
o To get input for in-place commands, such as for New, Add, Save As, Rename, and Print commands. 


Delete Network Locations 


Are you sure you want to delete the selected network locations? 


See Ge 


In this example, the Delete command is performed in a dialog box instead of a separate page. 


o To perform secondary, stand-alone tasks. Using a modeless, secondary window allows such tasks to be performed independently 
and outside the main task flow. 


Hub pages 
General 


. Use task-based hub pages when: 
o There are a small number of commonly used or important tasks. 


o The configuration involves one or two objects (examples: monitors, keyboard, mouse, game controllers). 
o The configuration applies system-wide (examples: date and time, security, power options). 


. Use object-based hub pages when: 
o The configuration could involve several objects (examples: user accounts, network connections, printers). 


o The configuration applies only to the selected object. 
- Don't use a hub page if the control panel item has a single page that contains all the tasks and properties involved. 


Object lists 


. List items ina logical order. Sort named objects in alphabetical order, numbers in numeric order, and dates in chronological order. 


- For object-based hubs, provide object view commands in the task pane if the ability to change the view is important to the tasks. 
The ability to change views is important if there are many objects and the default presentation doesn't work well for all scenarios. 
Users can change the list view even if there aren't explicit commands through the list view context menu, but it's less discoverable. 


For more guidelines about presenting object lists, see List Views. 


Interaction 


- Don't put commit buttons on hub pages. Hub pages are fundamentally launch points. Users never "commit" hub pages—they are 
never done with them. And commit buttons on hub pages make any tasks initiated from a hub confusing (users will wonder if 
those tasks need to be committed). 
o Exception: If changing a setting requires elevation, provide an Apply button with a security shield icon. Disable the commit button 
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once changes have been applied. 


- Consider putting the most useful properties directly on hub pages. Such hybrid hub pages are strongly recommended when users 
are most likely to use Control Panel to access those properties. 


GvL- » « System and Security » Power Options + | +4] | Search Control Panel 


Control Panel Home 


Select a power plan 


Power plans can help you maximize your computer's performance 
or conserve energy. Make a plan active by selecting it, or choose a 
Choose what the power button plan and customize it by changing its power settings. Tell me more 


does about power plans 
Create a power plan 

{ Choose when to turn off the 
display 

® Change when the computer 
sleeps 


Require a password on wakeup 


Preferred plans 


@ Balanced (recommended) Change plan settings 


Automatically balances performance with energy 
consumption on capable hardware. 


© Power saver Change plan settings 


Saves energy by reducing your computer's performance 
where possible. 


Hide additional plans ( A ) 


See also © High performance Change plan settings 
Personalization Favors performance, but may use more energy. 


User Accounts 


In this example, the Power Options control panel item has the most useful settings directly on the hub page. 


« Use an immediate commit model for any settings on hybrid hub pages so that changes are made immediately. Again, users 
never commit a hub page. If a setting requires a commit button, don't put it on a hub page. 


- Consider putting simple, "one-step" commands directly on hub pages instead of using navigation links. 
- Confirm in-place commands whose effects cannot be easily undone. Use a task dialog or message box. 


Confirm Connection Delete 


A Are you sure you want to delete 'IT Connection Manager’? 


Se 


In this example, the Delete command is confirmed with a dialog box. 


- For task-based hub pages, identify each task with a task link and an icon. You can also provide an optional description for each 
link. However, try to make the task links self-explanatory and provide optional descriptions only to links that really need them. 
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View advanced information about your computer's performance 


F Clear all WinEI scores and re-rate the system 
“Force a complete re-run of all Windows Experience Index tests. 


idl View performance details in Event log 
View details of problems affecting Windows performance. 


0) @ Open Performance Monitor 
& View graphs of system performance and collect data logs. 


©) Open Resource Monitor 


View real-time system resource usage and manage active services and applications. 


By Open Task Manager 
““ Get information about the programs and processes that are currently running on your computer. 


In this example, each task has a task link and anicon. 

- For object-based hub pages, single-clicking selects objects, and double-clicking selects an object and navigates to its default page. 
The default page is typically a property page or a task-based hub page. 

- An object-based hub page may navigate to a task-based hub for the selected objects. However, such secondary hubs should 
be avoided because they make a control panel item feel too indirect. 


Task panes 


Use task panes to present links to commands, views, and related control panel items. 


« For task panes in task-based hubs, present links in the following order: 
1. Secondary commands. Present primary tasks only in the content area. Use the task pane for secondary, optional tasks. Consider a 


task primary if users must discover it in important scenarios; secondary if it's acceptable for users not to discover it. 
2. See also. The optional links that navigate to related control panel items. 


- For task panes in object-based hubs, present links in the following order: 
1. Object views. The optional links used to control the presentation of the objects. 


2. Fixed commands. The commands that are independent of the currently selected objects. 
3. Contextual commands. The commands that depend on the currently selected objects, and are therefore not always displayed. 
4. See also. The optional links that navigate to related control panel items. 


- Don't use task panes in spoke pages. Unlike hub pages, spoke pages should be focused on completing the task. You don't want 
to encourage users to navigate away before completion. 


See also links 


- Provide See also links in the task pane to help users find related control panel items, or the right control panel item if they have 
the wrong one. Link to items users are likely to associate with your control panel item. 


See also 
Backup and Restore 
Windows Update 


Windows Program 
Compatibility Troubleshooter 


In this example, the Action Center control panel item links to related control panel items. 
- Link to a specific task page if that is what users are more likely to recognize. Otherwise, link to the entire control panel item. Use 
the control panel name without adding the phrase, control panel. 


Spoke pages 


General 


- Use task pages for commonly used or important tasks where users need more guidance and explanation. 
- Use form pages for features that have many settings and benefit from a direct, single-page presentation. The ideal tasks for 
such pages typically involve obvious changes to a few simple properties. 


- Don't use task panes in spoke pages. 
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Interaction 


- Try to limit main tasks to a single page. If more than one page is required, you can: 
o Use intermediate spoke pages for additional or optional steps. Intermediate spoke pages are committed by the final spoke page. 


o Use independent windows for independent auxiliary tasks. Independent windows are committed on their own, and independently 
of the main task. 


Doing so keeps the meaning of the commit buttons for the main task clear and unambiguous. Users should always be confident 
in understanding what they are committing to. 


- Don't use See Also links within a task flow. These link to related, but different, control panel items. Although navigating to a 
different item is acceptable in hub pages, it is not in spoke pages, because doing so interrupts the task. 


- Don't use spoke pages for simple input or confirmations. Use modal dialog boxes instead. 
Interaction (intermediate spoke pages) 


- Use task links or a Next button to navigate to the next page. The way to proceed to the next step should always be obvious. 


- You can have navigation links to optional task steps. To avoid confusion when users commit to the task, those extra pages should 
be intermediate pages within the same control panel item. They shouldn't have commit buttons, but should be committed when 
the main task is committed. 


Interaction (final spoke pages) 


Use commit buttons to complete a task. Use a delayed commit model for spoke pages, so that changes aren't made until 
explicitly committed (if users navigate away using Back, Close, or the Address bar, changes are abandoned). The commit buttons are 
a visual clue that the user is about to complete a task. Don't use links for this purpose. 


Don't confirm commit buttons (including Cancel). Doing so can be annoying. Exceptions: 
o The action has significant consequences and, if incorrect, not readily fixable. 


o The action may result in a significant loss of the user's time or effort. 
o The action is clearly inconsistent with other actions. 


Don't confirm if users abandon changes by navigating away using Back, Close, or the Address bar. However, you may confirm if 
a potentially unintended navigation may result in a significant loss of the user's time or effort. 


Don't use command or navigation links (including See also links). On final spoke pages, users should explicitly complete or cancel 
the task. Users should not be encouraged to navigate somewhere else, because doing so would likely cancel the task implicitly. 


When users complete or cancel a task, they should be sent back to the hub page from which the task was launched. If there is no 
such page, close the control panel window instead. Don't assume that spoke pages are always launched from another page. 


Remove the stale "committed" pages from the Windows Explorer Back stack when you return users back to the page that the task 
was launched from. Users should never see the pages that they have already committed to when clicking the Back button. Users 
should always make additional changes by completely redoing the task instead of clicking Back to modify stale pages. 

o Developers: You can remove these stale pages using the ITravelLog::FindTravelEntry() and ITravelLogEx::DeleteEntry() APIs. 


Commit buttons 
Note: Cancel buttons are considered to be commit buttons. 


- Confirm tasks using commit buttons that are specific responses to the main instruction, instead of generic labels such as OK. 
The labels on commit buttons should make sense on their own. Avoid using OK because it isn't a specific response to the 
main instruction, and therefore easier to misunderstand. Furthermore, OK is typically used with modal dialog boxes and 
incorrectly implies closing the control panel item window. 
o Exceptions: 
= Use OK for pages that don't have settings. 


a Use OK when the specific response is still generic, such as Save, Select, or Choose, as when changing a specific setting or a collection 
of settings. 


a Use OK if the page has radio buttons that are responses to the main instruction. To maintain the delayed commit model, you can't 
use task links on a final spoke page. 
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a= 
r~ 
OuU- & « User Controls » Web Restrictions v | +4| | Search Pp 


Which parts of the Internet can Jonathan visit? 


@ Block some websites or content 


») Allow all websites and content 


Allow and block specific websites 
Edit the Allow and block list 
[-] Only allow websites which are on the allow list 


Block web content automatically 


Choose a web restriction level: 
») High @ Medium ») None © Custom 


Medium level: block unratable content and web content in the following categories: mature content, 
pornography, drugs, hate speech, and weapons. Not all content in these areas can be automatically 
blocked. 


To control access to specific websites, add the website to the Allow and block list. 


How does the web filter work? 


("| Block file downloads 


Go to the Site Review website to give feedback on website categorization 
Read the privacy statement. 


In this example, the radio buttons, not the commit buttons, are responses to the main instruction. 


- Provide a Cancel button to let users explicitly abandon changes. While users can implicitly abandon a task by not confirming 
their changes, providing a Cancel button allows them to do so with greater confidence. 
o Exception: Don't provide a Cancel button for tasks where users can't make changes. The OK button has the same effect as Cancel in 
this case. 


- Don't use Close, Done, or Finish commit buttons. These buttons are typically used with modal dialog boxes and incorrectly imply 
closing the control panel item window. Users can close the window using the Close button on the title bar. Also, Done and Finish 
are misleading because users are returned to the page where the task was launched from, so they aren't really done. 


- Don't disable commit buttons. Otherwise users have to deduce why the commit buttons are disabled. It's better to leave 
commit buttons enabled, and give a helpful error message whenever there is a problem. 


Make sure the commit buttons appear on the page without scrolling. If the page is long, you can make commit buttons always 
visible by placing them in a command area, instead of in the content area. 
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| © lame 
_)v|lid > Control Panel » Hardware and Sound » AutoPlay v | +> Search Control... 2 
— ye 


Choose what happens when you insert each type of media or device e 
[-] Use AutoPlay for all media and devices 


Media 


© Audio CD ([B) Play audio CD using Windows Media Player 


@2 Enhanced audio CD @ Ask me every time 


€8 DvD movie @ Take no action 


¢8 Enhanced DVD movie de Open folder to view files using Windows Explorer 


fal Software and games & Take no action 


=} Pictures [ait Import Pictures and Videos using Windows 


Ce Gane 


In this example, content area size is unbounded, so the commit buttons are placed in the command area. 
« Right-align the commit buttons and use this order (from left to right): positive commit buttons, Cancel, and Apply. 


Preview buttons 


- Make sure the Preview button means to apply the pending changes now but restore the current settings if users navigate away 
from the page without committing to the changes. 

You can use Preview buttons on any spoke page. Hub pages don't need Preview buttons because they use an immediate 
commit model. 


Consider using a Preview button instead of an Apply button for control panel pages. Preview buttons are easier for users 
to understand and can be used on any spoke page. 


- Provide a Preview button only if the page has settings (at least one) with effects that users can see. Users should be able to preview 
a change, evaluate the change, and make further changes based on that evaluation. 


Always enable the Preview button. 


Live previews 
A control panel item has live preview when the effect of changes on a spoke page can be seen immediately. 


- Consider using live preview for display settings when: 
o The effect is obvious, typically because it applies to the entire monitor. 


o The effect can be applied without significant delay. 
o The effect is safe and can be undone easily. 
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v a « Personalization » Window Color and Appearance 


Change the color on your computer 


Select a color to apply it to your windows, Start menu, and taskbar. 
| ° | - } 
: - : we _ 


Current color: Lime 


¥| Enable transparency 


Color intensity: 


(™) Show color mixer 


Advanced appearance settings... 


In this example, the effect of the Windows Color and Appearance settings is seen immediately. Doing so allows 
users to make changes with minimal effort. 


« Use Save changes and Cancel for the commit buttons. "Save changes" keeps the current settings, whereas Cancel reverts to the 
original settings. "Save changes" is used instead of OK to make it clear that any previewed changes haven't been applied yet. 
- Don't provide an Apply button. The live preview makes Apply unnecessary. 


« Restore any changes if users navigate away using Back, Close, or the Address bar. To preserve changes, users must commit 
them explicitly. 


Apply buttons 


- Make sure the Apply button means apply the pending changes (made since the task was started or the last Apply), but remain on 
the current page. Doing so allows users to evaluate the changes before moving on to other tasks. 
- Use Apply buttons only on final spoke pages. Apply buttons should not be used on intermediate spoke pages to maintain an 
immediate commit model. 
o Exception: You can use Apply buttons on a hybrid hub page if changing a setting requires elevation. For more details, see hub 
page interaction. 


Provide an Apply button only if the page has settings (at least one) with effects that users can evaluate in a meaningful way. 
Typically, Apply buttons are used when settings make visible changes. Users should be able to apply a change, evaluate the change, 
and make further changes based on that evaluation. 


Enable the Apply button only when there are pending changes; otherwise, disable it. 


Assign "A" as the access key. 


Control panel integration 
To integrate your control panel item with Windows, you can: 


- Register your control panel item (including its name, description, and icon), so that Windows is aware of it. 


- If your control panel item is top level (see below): 
o Associate it with the appropriate category page. 


o Provide task links (including their name, description, keywords, and command line) to indicate primary tasks and allow users 
to navigate directly to the tasks. 


- Provide search terms to help users find your task links using the Control Panel search feature. 
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Note that you can provide this information only for individual control panel items—you can't add or change this 
information for existing control panel items that you extend. 


Category pages 
. Add your control panel item to a category page only if: 
o Most users need it. Example: Network and Sharing Center 
o Itisused many times. Example: System 
o It provides important functionality that isn't exposed elsewhere. Example: Printers 
Control panel items that meet these criteria are referred to as top level. 


Don't add your control panel item to a category page if: 
o It is rarely used or used for one-time setup. Example: Welcome Center 


o Itis targeted at advanced users or IT professionals. Example: Color Management 
o It doesn't apply to the current hardware or software configuration. Example: Windows SideShow (if not supported by current hardware). 


Removing such control panel items from the category pages makes the top-level items easier to find. Given their usage, these 
control panel items are sufficiently discoverable through search or contextual entry points. 


Associate your top-level control panel item with the category under which users are most likely to look for it. This decision should 
be based on user testing. 


Consider associating your top-level control panel item with the second most likely category as well. You should associate a 
control panel item with two categories if users are likely to look for its main tasks in more than one place. 


Don't associate your control panel item with more than two categories. The value of the categorization is undermined if control 
panel items appear in several categories. 


Task links 


. Associate your control panel item with its primary tasks. You can display up to five tasks on a Category page, but additional tasks 
are used for control panel searching. Use the same phrasing as you do for task links, possibly removing some words to make the 
task links more succinct. 


- Prefer to have task links lead to different places in your control panel item. Having multiple links to the same place can be confusing. 
Search terms 


- Register search terms for your control panel item that users are most likely to use to describe it. These search terms should include: 
o The features or objects configured. 


o The primary tasks. 
These search terms should be based on user testing. 


Also include common synonyms for these search terms. For example, monitor and display are synonyms, so both words should 
be included. 


Include alternative spellings or word breaks. For example, users might search for either web site and website. Consider 
providing common misspellings as well. 


Consider singular vs. plural noun forms. The control panel search feature doesn't automatically search for both forms; supply the 
forms for which users are likely to search. 


Use simple present tense verbs. If you register connect as a search term, the search feature won't automatically look for 
connects, connecting, and connected. 


Don't worry about case. The search feature is not case-sensitive. 
Standard users and Protected administrators 


Many settings require administrator privileges to change. If a process requires administrator privileges, 
Windows Vista and later requires Standard users and Protected administrators to elevate their privileges 


explicitly. Doing so helps prevent malicious code from running with administrator privileges. 
For more information and examples, see User Account Control. 
Schemes and themes 


Ascheme is anamed collection of visual settings. A theme is a named collection of settings across the system. 
Examples of schemes and themes include Display, Mouse, Phone and M odem, Power Options, and Sound and 
Audio Options. 


- Allow users to create schemes when: 
o Users are likely to change the settings. 


o Users are most likely to change settings as a collection. 


© 289 MS are Hef when usery ea a different environment, such as a different physical location (country/region, time zone); 
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using their computer in a different situation (on batteries, docked/undocked); or using their computer for a different 
function (presentations, video playback). 


- Provide at least one default scheme. The default scheme should be well named and apply to most users in most circumstances. 
Users shouldn't have to create a scheme of their own. 


- Provide a preview or other mechanism so that users can see the settings within the scheme. 


GOvU- EZ + Control Panel » Appearance and Personalization » Personalization 


Control Panel Home : 
Change the visuals and sounds on your computer 


Change desktop icons Click a theme to change the desktop background, window color, sounds, and screen 


: saver all at once. 
Change mouse pointers 


Change your account picture 


See also 
Display 


Taskbar and Start Menu Desktop Background Window Color Screen Saver 


Ease of Access Center Slide Show Sky Characters None 


In this example, the Personalization control panel item shows a preview of the desktop and appearance settings. 


- Provide Save As and Delete commands. A rename command isn't necessary—users can rename schemes by saving under the 
desired name and deleting the original scheme. 


« Ifthe settings can't be applied without a scheme, don't allow users to delete all the schemes. Users shouldn't have to create a 
scheme of their own. 


- Ifthe schemes are not completely independent (for example, power schemes depend upon the current laptop mode of 
operation), make sure there is an easy way to change settings that apply across all schemes. For example with power schemes, 
make sure that users can set what happens when a portable computer's lid is closed in a single location. 


Miscellaneous 


- Use Control Panel extensions for features that replace or extend existing Windows functionality. The following control panel items 
are extensible: Bluetooth Devices, Display, Internet, Keyboard, Mouse, Network, Power, System, Wireless (infrared). 


Default values 


- The settings within a control panel item must reflect the current state of the feature. Doing otherwise would be misleading 
and possibly lead to undesired results. For example, if settings reflect the recommendations but not the current state, users might 
click Cancel instead of making changes, thinking that no changes are needed. 


- Choose the safest (to prevent loss of data or system access) and most secure initial state. Assume that most users won't change 
the settings. 


- If safety and security aren't factors, choose the initial state that is most likely or convenient. 
Text 


Item names 


- Choose a descriptive name that clearly communicates and differentiates what the control panel item does. M ost names describe 
the Windows feature or object being configured, and are displayed in the Classic View of the control panel home page. 
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- Don't include the words "Settings," "Options," "Properties," or "Configuration" in the name. This is implied, and leaving it off makes 
it easier for users to scan. 


Incorrect: 

Accessibility Options 

Modem Settings 

Power Options 

Regional and Language Options 
Correct: 

Accessibility 

Modem 

Power 

Regional Formats and Languages 


In the correct examples, unnecessary words are removed. 


If the control panel item configures related features, list only those features required to identify the item, and list the features 
the most likely to be recognized or used first. 


Incorrect: 

Folder Options 

Phone and Modem Options 
Correct: 

Files and Folders 

Modem 


In the correct examples, the primary control panel item features are given emphasis. 
- Use title-style capitalization. 


Page titles 


Note: As with all Explorer windows, control panel page titles are displayed on the address bar, but not the title 
bar. 


- For hub pages, use the control panel item name. 


- For spoke pages, use a concise summary of the page's purpose. Use the page's main instruction if it is concise; otherwise use a 
concise restatement of the main instruction. 


Gv - » « System and Security » Power Options v| + 


Control Panel Home 
Select a power plan 


Power plans can help you maximize your computer's performance 
or conserve energy. Make a plan active by selecting it, or choose a 
Choose what the power button plan and customize it by changing its power settings. Tell me more 


does about power plans 
Create a power plan 

{@ Choose when to turn off the 
display 

® Change when the computer 
sleeps 


Require a password on wakeup 


Preferred plans 


@ Balanced (recommended) Change plan settings 


Automatically balances performance with energy 
consumption on capable hardware. 


») Power saver Change plan settings 


Saves energy by reducing your computer's performance 
where possible. 


Hide additional plans ( A ) 


See also » High performance Change plan settings 
Personalization Favors performance, but may use more energy. 


User Accounts 


In this example, Power Options is used for the page title instead of the main instruction. 
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- Use title-style capitalization. 


Task link text 


The following guidelines apply to links to task pages, such as Category page task links and See also links. 


« Choose concise task names that clearly communicate and differentiate the task. Users shouldn't have to figure out what the task 


. If the task configures several related features, list only the features that are representative of the set. Omit details that can be 


really means or how it differs from other tasks. 


Incorrect: 

Adjust display settings 
Correct: 

Screen resolution 


In the correct example, the wording conveys more precision. 


Retain similar language between task links and the pages they point to. Users shouldn't be surprised by the page that is displayed by 


a link. 


For task pages, design the main instruction, commit buttons, and task links as a related set of text. 


Examples: 


Task link: 
Main instruction: 
Commit button: 


Task link: 
Main instruction: 


Commit button: 


Task link: 
Main instruction: 
Commit button: 


Connect to a wireless network 
Choose a network to connect to 
Connect 


Set up parental controls 
Choose a user and set up parental controls 
Apply parental control 


Resolve your sync conflicts 
How do you want to resolve this conflict? 
Resolve 


These examples show the relationship of the task link text, main instruction, and commit button text. 


While tasks often start with verbs, consider omitting the verb on Category pages if it is a generic, configuration-related verb 
that doesn't help communicate the task. 


Specific, helpful verbs: 
Add 
Check 
Connect 
Copy 
Create 
Delete 
Disconnect 
Install 
Remove 
Set up 
Start 
Stop 
Troubleshoot 


Generic, unhelpful verbs: 


Adjust 
Change 
Choose 
Configure 
Edit 
Manage 
Open 
Pick 

Set 
Select 
Show 
View 


readily inferred. 
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Incorrect: 

Speaker volume, mute, volume icon 

Speakers, microphones, MIDI, and sound schemes 
Correct: 

Speaker volume 

Speakers and microphones 


In the correct examples, only the representative features are given in the task link. 


You should phrase tasks in terms of technology only if target users would do so as well. 


Incorrect: 
Connectoids 
Pixel depth 
dpi 

Correct: 
Printers 
Scanners 
Mouse 


The correct examples are technology-based terms that target users are likely to use, whereas the incorrect 
examples are not. 


- Use plural nouns only if the system can support more than one. 
. Use sentence-style capitalization. 


- Don't use ending punctuation. 
Main instructions 


- For the hub page, use the main instruction to explain the user's objective with the control panel item. The main instruction 
should help users determine if they have selected the right control panel item. Keep in mind that users might have selected your 
control panel item in error and are actually looking for settings that are part of another control panel item. 


Examples: 
Keep your computer secure and up-to-date 
Optimize your computer so it's easier to see, hear, and control 


For spoke pages, use the main instruction to explain what to do on the page. The instruction should be a specific 
statement, imperative direction, or question. Good instructions communicate the user's objective with the page rather than 
focusing purely on the mechanics of manipulating it. 


Incorrect: 
Pick a notification task 
Correct: 
Indicate how to handle incoming information 


The correct version better communicates the goal achieved by the page. 


. Use specific verbs whenever possible. Specific verbs are more meaningful to users than generic ones. 
. Use sentence-style capitalization. 


- Don't include final periods if the instruction is a statement. If the instruction is a question, include a final question mark. 
Supplemental instructions 


- For the hub page, use the optional supplemental instruction to further explain the purpose of the control panel item. 


- For spoke pages, use the optional supplemental instruction to present additional information helpful to understanding or using 
the page. You can provide more detailed information and define terminology. 


. Use complete sentences and sentence-style capitalization. 


Page text 


- Don't restate the main instruction in the content area. 

. Use the word "page" to refer to the page itself. 

. Use the second person (you, your) to tell users what to do in the main instruction and content area. Often the second person 
is implied. 


Example: 
Choose the pictures you want to print. 
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- Use the first person (I, me, my) to let users tell the control panel item what to do in the content area that responds to the 
main instruction. 


Example: 
Print the photos on my camera. 


Task links 


Choose concise link text that clearly communicates and differentiates what the task link does. It should be self-explanatory 
and correspond to the main instruction. Users shouldn't have to figure out what the link really means or how it differs from other links. 


Always start task links with a verb. 


Use sentence-style capitalization. 


Don't use ending punctuation. 


If the task link requires further explanation, provide the explanation in a separate text control using complete sentences and 
ending punctuation. However, add such explanations only when needed—don't add explanations to all task links because another 
task link needs one. 


For more information and examples, see Links. 


Commit buttons 


. Use specific commit button labels that make sense on their own and match the main instruction. Ideally users shouldn't have to 
read anything else to understand the label. Users are far more likely to read command button labels than static text. 


. Always start commit button labels with a verb. 

- Don't use Close, Done, or Finish. These button labels are better suited for other types of windows. 
. Use sentence-style capitalization. 

- Don't use ending punctuation. 


. Assign a unique access key. 
o Exception: Don't assign access keys to Cancel buttons, because Esc is its access key. Doing so makes the other access keys easier 
to assign. 


Documentation 
When referring to the control panel home page or category pages: 
- In user documentation, refer to Control Panel, using title-style capitalization and omitting a preceding definite article the. 


Example: 
In Control Panel, open Security Center. 


- In programming and other technical documentation, refer to control panel home page and control panel category page, 
without capitalizing any of the words. A preceding definite article is optional. 


For control panel items: 


« When referring to an individual control panel item, use "[control panel item name] in Control Panel" or generally "Control Panel item" 
in user documentation. Don't use applet, program, or control panel to refer to individual control panel items. 


« When referring to a control panel item's hub page, use "main [control panel item name] page." 


- When possible, format the control panel name using bold text. Otherwise, put the name in quotation marks only if required to 
prevent confusion. 


Examples: 


- In Control Panel, open Parental Controls. 
- Return to the main Parental Controls page. 


© 2010, Microsoft Corporation. All rights reserved. Page 824 of 882 


Control Panel Usage Patterns 


Control Panels 
For items in Control Panel, you can use a task flow or a property sheet. Here are their usage patterns: 
Task flow patterns 


Task flow items use a hub page to present the high-level choices, and spoke pages to perform the actual 
configuration. There are several possible hub and spoke combinations: 


A hub with task-based spoke pages 
In this case, the item is composed completely of individual tasks. 


A hub with task-based and form-based spoke pages 
In this case, the task-based spoke pages are used for the most common and important tasks, and the form-based 
spoke page is used to configure the less common, less important, more advanced properties. 


Note: Using only task-based spoke pages might make an item bloated and tedious to use; consider using form- 
based pages when task-based spokes don't work well for all of your properties. 


An object-based hub without spokes 
In this case, an object-based hub page has all the properties and tasks in place (perhaps using dialog boxes for 
simple input), So no spoke pages are required. 


A form-based spoke page without a hub 
In this case, the form contains all the tasks and properties involved, so no hub page is required. 


Task- based hub pages 


These hub pages present the most commonly used tasks. Clicking a task link navigates users to a spoke page to 
configure system features and perform related tasks. They are best used for a few common or important tasks, 
where users need more guidance and explanation. The configuration should be system wide (examples: date and 
time, security, power options), and there should typically be one or two objects involved (examples: monitors, 
keyboard, mouse, game controllers). Hub pages don't have commit buttons. 


The hybrid version is a task-based hub page that also has some properties or commands directly on it. Hybrid hub 
pages are strongly recommended when users are most likely to use the item to access those properties and 
commands. 
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Sex 
ro) « System and Security » Windows Update 7’ Search Con... 


Control Panel Home 


Windows Update 
Check for updates 
Change settings 
View update history 
Restore hidden updates 


Updates: frequently asked 
questions 


Windows is up to date 


There are no updates available for your 
computer. 


Most recent check for updates: Today at 7:37 PM 

Updates were installed: Today at 5:44 PM. 
View update history 

You receive updates: For Windows and other 
products from Microsoft 
Update 


Find out more about free software from Microsoft 
Update. 


See also Click here for details. 


Installed Updates 


A typical hybrid task-based hub page. 

For detailed guidelines about hub pages, see the section in the main Control Panels article. 

Object-based hub pages 

These hub pages present the available objects using a list view control. Single-clicking selects an object; double- 
clicking selects an object and navigates to a spoke page with the selected object's properties. They are best used 
when there could be several objects. There might be some system-wide settings, but most configuration tasks 


apply only to the selected object (for example, user accounts, network connections, and printers). Hub pages 
don't have commit buttons. 
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es] 
[ Search Programs... JO 


Control Panel Home : 
Uninstall or change a program 


View installed updates To uninstall a program, select it from the list and 
®) Turn Windows features on or then click Uninstall, Change, or Repair. 
off 
Install a program from the Organize ¥ [=| | (7) 


network : ; 
Microsoft Corporation 


fi Microsoft Office Live Add-in 
a | 13 


a Pe | Microsoft Corporation 


Microsoft Office Outlook 
Connector 
Microsoft Corporation 


Microsoft Product Studio 
Microsoft Corporation 
4.97 MB 


fF") Microsoft Save as PDF or XPS 


Currently installed programs 
: 25 programs installed 


A typical object-based hub page implemented with a list view control. 
Task pages 


These spoke pages present a task or a step in a task with a specific, task-based main instruction. They are best 
used for tasks that benefit from additional guidance and explanation. The final page in a task has commit buttons 
so that users can complete or cancel the task. 
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a 


| 


Gv- » « System and Security > Power Options 7’ Search Control Panel Pp 


Control Panel Home 
Select a power plan 
Require a password on wakeup Power plans can help you maximize your computer's performance 
or conserve energy. Make a plan active by selecting it, or choose a 
Choose what the power button plan and customize it by changing its power settings. Tell me more 
does about power plans 
Create a power plan 
P Preferred plans 
( Choose when to turn off the 
display @ Balanced (recommended) Change plan settings 
Automatically balances performance with energy 


8 pe he computer consumption on capable hardware. 


sleeps 
© Power saver Change plan settings 


Saves energy by reducing your computer's performance 
where possible. 


Hide additional plans (A) 


See also © High performance Change plan settings 
Personalization Favors performance, but may use more energy. 


User Accounts 


A typical task page. 


For detailed guidelines about spoke pages, see the section in the main Control Panels article. 


Form pages 


These spoke pages present a collection of related properties and tasks based on a general main instruction. They 
are best used for features that have many properties and benefit from a direct, single-page presentation, such as 
advanced properties. The final page in a task has commit buttons so that users can complete or cancel the task. 
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= 2) | 
OU -e « Use the computer without a display ¥ | +4 | Search Control... 2 


Use the computer without a display 
When you select these settings, they will automatically start each time you log on. 


Hear text read aloud 
Turn on Narrator 


Narrator reads aloud any text on the screen. You will need speakers. 


("| Turn on Audio Description 
Hear descriptions of what's happening in videos (when available). 


Set up Text to Speech 
Adjust time limits and flashing visuals 


Turn off all unnecessary animations (when possible) 


How long should Windows notification dialog boxes stay open? 
5.0 seconds = 


See also 
Audio Devices and Sound Themes 


Learn about additional assistive technologies online 


(ok |} {Cancel} [Apply | 


A typical form page. 
For detailed guidelines about spoke pages, see the section in the main Control Panels article. 
Property sheet patterns 


Property sheets are best used in legacy items with many settings targeted at advanced users. New items can 
achieve the same effect with a task flow, using the form page pattern. 
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Ratings help you control the Internet content that can be 
viewed on this computer. 


[_@enabie.. Js setonos 
Certificates 


AutoComplete 


AutoComplete stores previous entries 


Feeds and Web Slices provide updated 
content from websites that can be 
read in Internet Explorer and other 


programs. 


This item is implemented using a property sheet. 


© 2010, Microsoft Corporation. All rights reserved. Page 830 of 882 


Help 


Use Help as a secondary mechanism to help users complete and better understand tasks—the primary mechanism 
being the UI itself. Apply these guidelines to make the content truly helpful and easy to find. 


Is this the right user interface? 
Design concepts 
Usage patterns 
Guidelines 
Entry points 
Content 
Icons 
Text 


A Help system is composed of various types of content designed to assist users when they are unable to complete 
a task, want to understand a concept in more detail, or need more technical details than are available in the UI. 


In this article, we refer to Help as secondary to UI. The UI is primary because that is where users first try to solve 
their problems. They consult the Help system only if they can't accomplish their task with the Ul. 


@ Windows Help and Support 


Find an answer 


| re 


Windows Basics Security and Windows Online Help 
Maintenance 


| ? o 


Table of Contents Troubleshooting What's new? 


Ask someone 


Use > Windows Remote Assistance to get help from a friend or offer help. 
Post a question or search for an answer in Windows communities. 
Contact Microsoft Customer Support online. 

More support options... 


*“* Ask someone or expand your search 


i Offline Help + 


The Windows®Help and Support home page, available from the Start menu. 


Note: Guidelines related to style and tone are presented in a separate article. 


Is this the right user interface? 
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To decide, consider these questions: 


- How motivated are your target users? The more highly motivated they are to discover functionality of your program and 
become intermediate or even advanced users of it, the more willing they will be to research answers to their questions by 
consulting Help topics. 


- Are you using Help to fix a bad UI? The better your UI, the less users will seek additional help. If your program has very clear, 
helpful primary UI (such as jargon-free error messages, well-written wizards, and unambiguous dialog boxes), you may not need 
a secondary Help system at all. 


- Is your program relatively simple? If so, consider incorporating all necessary assistance content into your primary UI surfaces. Users 
are more likely to seek additional help in programs that perform complex tasks. 


Is your application intended for developers, IT professionals, or other software experts? These users tend to expect reference Help 
for programming language conventions and in-depth conceptual Help for mastery of features. 


Design concepts 


If you decide to include Help in your program, integrate it into your overall design. The Help interface should be 
simple, efficient, and relevant; it should enable users to get help easily and then return to their task. Think of 
your Help system in terms of users’ time: minimize disruption first by anticipating where they will encounter 
problems in your program, then solving those problems by incorporating fundamental assistance directly into 
your UI, and creating clear and consistent entry points into your more detailed Help. 


Windows®assistance was designed according to these principles. Here are some of the design changes to the 
Windows Help user experience: 


- More discoverable entry points to Help from the primary UI (especially new Help links from UI surfaces such as dialog boxes, 
error messages, and wizards). Help links take you directly to the pertinent topic in Help. 


« AHelp button icon is available in the upper-right corner of most Control Panel hub pages, as well as shell folders. 

- Users can choose to get the most up-to-date Help content from Windows Online Help and Support when they're online. 

- Help topics are now task-based rather than feature-focused, so that users can accomplish their tasks quickly and efficiently. 
- Help topics are now largely based on known top user scenarios. 

- Help topics have a more relaxed and informal tone, using real-world language. 


- Help topics are designed for effective scanning, as users rarely read the content word-for-word. 
An analogy for Help 


To think in greater depth about designing your Help system, consider an analogy from everyday life. You are lost 
in an unfamiliar city. What do you do? Many would react like this: 


1. Get oriented; look for landmarks, street signs (names and pointers to places). 
2. Look for maps. 
3. Finally, as a last resort, ask for directions or call a friend. 


The design of the city's "interface" affects your need for assistance. Well-labeled streets, explicit directions 
(pointers to hospitals, airports, museums, and the post office), and clear landmarks such as prominent 
geographical features or buildings help you find your way. 


You ask for help as a last resort. It's an indication that the city's "interface" has failed by being poorly designed 
and confusing. You are more likely to ask for help in a place that has a specific label that suggests helpfulness. For 
example, you are more likely to ask for help in a place labeled "Directions" or "Information" than a general place 
like the City Hall—even though just about anyone at City Hall could give you directions. 


When you ask for help, chances are you are frustrated and just want to get to your intended destination. You 
probably aren't in the mood to spend time taking a tour of the city or learning about its history. Further, your 
motivation depends on the importance of the task. If you are trying to find your hotel room, you will do whatever 
it takes. However, if your goal is to find a place of minor importance, most likely you will just give up after a 
modest effort. 


All of these aspects of finding your way in real space correspond to how users typically find their way in the 
virtual space of your program. Seeking help beyond the primary UI is by its very nature disorienting; do your best 
to mitigate such an experience by well-designed UI and intelligent "street signs" to direct users to the answers 
they need. 
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Designing UI so that Help is unnecessary 
Try to make Help unnecessary in the first place, by: 


- Making common tasks easy to discover and perform. 


Providing clear main instructions. 


- Providing clear, concise control labels that are goal- and task-oriented. 


Providing supplemental instructions and explanations where needed. 


- Anticipating avoidable problems by using controls constrained to valid choices, providing suitable default values, handling all 
input formats, and preventing errors. 


Writing error messages that provide a clear solution or action for the user to take. 


- Avoiding confusing UI designs, such as tasks with poor flow or using controls that are disabled for no apparent reason. 


Working with writers and editors early in the development cycle to create high-quality, consistent UI text throughout your program. 


Users shouldn't have to go somewhere else to figure out how to use your UI. Add essential information directly 
into the primary UI, rather than forcing users out of their immediate context and into the Help pane. If important 
information exists only in a Help topic, there's a good chance that users won't see it. For information that is 
optional and more explanatory, use Help links from the primary UI to the relevant Help topic for supplemental 
assistance. 


Considering user motivation 


For most users, speed and efficiency are among the paramount virtues of good programs. Users want to get their 
work done. Generally, they are not interested in learning about the program and the technology for its own sake; 
their patience extends only insofar as that program serves their own interests and solves problems at hand. 


Design your Help system to match your users' motivation. For example, consider a user who has strolled up to a 
kiosk at a museum. If she cannot figure out how to perform the task quickly, she is likely just to give up and walk 
away. She is unlikely to spend time using Help. Alternatively, a highly-motivated user has a higher tolerance for 
time spent researching your Help system for answers. A business user who must balance the books, for example, 
is probably willing to consult Help content to get the most out of that new accounting application. 


Writing content for scanning 


Write Help topics knowing that they will be scanned for specific information, not read word-for-word. Write 
concisely, getting to the point quickly, and providing information that users can act on. 


- Write "how-to" topics using numbered steps in a consistent format so that users recognize they are getting procedural assistance. 
- Write reference topics with ease-of-scanning in mind, using tables, for example, to present UI options or language syntax. 
- Write conceptual topics that are logically organized by subheadings, so that the user can skip whole sections of lesser interest. 


In all Help content, it is easier to scan bulleted lists than standard paragraph blocks of text; use bullet lists 
judiciously, though, not as a crutch for unorganized material. 


Creating content that matters 


Given that no Help system can anticipate every question that every user might have, focus most of the content 
on answering the top questions in the top scenarios for your target users. For example, effective searching and 
how to establish network connectivity (among other tasks) may be highly sought-after topics. Also, focus on tasks 
within your top user scenarios, rather than documenting a feature or technology exhaustively for its own sake. 


Tip: Technical support is a good source for Help content. Help desks often keep records of frequently asked 
questions about particular programs or tasks that users are trying (and failing) to accomplish. 


It isn't necessary to provide help for every feature in the UI. Quite often, unhelpful Help results from trying to 
create Help for everything. If the UI is well designed, most of these Help topics won't be very helpful; they will 
just restate the obvious. 


If there is more than one way to perform a task, in most cases you can just document the most common way 
used by inexperienced users. Exceptions to this include accessibility considerations (documenting keyboard 


ele of mouse actions, for example), and platform considerations (documenting for the tablet form factor, 
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for example, or for server environments in which the command line can substitute for the graphical user 
interface). 


Remember that users often don't think of the problems they are encountering in exactly the same terms as you 
do. For example, users may find it strange to think of themselves as an "account." Be sure to design your search 
and indexing functionality, then, to account for likely terminology variations and synonyms. 


Between the primary UI and the Help system, though, terms should be very similar if not identical. Users can be 
confused when the Help system language doesn't correlate very closely to what they are seeing on the screen. 


Writing compelling Help link text 


When you link to a Help topic from your primary UI, be sure to write compelling Help link text. Clear and specific 
language inspires confidence. Users tend to believe that generic Help links (a button with the word "Help" or 
"Learn more" on it) will not lead to the right information without a significant investment of time. 


If you do only five things... 
1. Design your UI so that users don't need Help. 


2. Make your Help helpful by focusing the content on the top questions in the top scenarios for your target users. 


3. Present the Help content so that it is easy to scan. 
4. Understand that you don't have to provide help for every feature in the UI. 
5. Make the Help entry points discoverable and compelling. 


Usage patterns 


Different kinds of content serve different purposes. 


Procedural Help Procedural Help should focus on "how" information rather than "what" or "why." 
Provides the 
steps for 
carrying out a 


feeb @ Windows Help and Support 


Delete temporary files using Disk Cleanup 


If you want to reduce the number of unnecessary files on your hard disk to free up disk space and help 
your computer run faster, use Disk Cleanup. It removes temporary files, empties the Recycle Bin, and 


removes a variety of system files and other items that you no longer need. 


> Click to open Disk Cleanup. 


In the Disk Cleanup: Drive Selection dialog box, select the hard disk drive that you want to clean 


up, and then click OK. 


Click the Disk Cleanup tab, and then select the check boxes for the files you want to delete. 
When you finish selecting the files you want to delete, click OK, and then click Delete files to 


confirm the operation. 


Disk Cleanup proceeds to remove all unnecessary files from your computer. 
See also 
e@ Permanently delete files from the Recycle Bin 


% Ask someone or expand your search 


Options v 


(5 Offline Help v 


In this example, the Help topic describes how to use a feature of the Disk Cleanup utility, providing steps to follow 


in sequence. 
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Conceptual Help Conceptual Help should provide "what" or "why" information beyond that needed to complete a task. 
Provides 
background 
information, 
feature 
overviews, or 
processes. 


@ Windows Help and Support 


- 


> Show all 


The desktop (overview) 


The desktop is the main screen area that you see after you turn on your In this article 

computer and log on to Windows. Like the top of an actual desk, it Where did my desktop go? 
serves as a surface for your work. When you open programs or folders, 
they appear on the desktop. You can also put things on the desktop, 
such as files and folders, and arrange them however you want. 


Working with desktop icons 
The Recycle Bin 

Picking a desktop 

The desktop is sometimes defined more broadly to include the taskbar background 

and Windows Sidebar. The taskbar sits at the bottom of your screen. It 

shows you which programs are running and allows you to switch between them. It also contains the Start 
button @, which you can use to access programs, folders, and computer settings. On the side of the screen, 
Sidebar contains small programs called gadgets. 


co 
“* Ask someone or expand your search 


i Offline Help v 


In this example, the Help topic defines what the desktop is, and provides additional detail about what it contains 
and why users interact with it. 


Reference Help You can use reference Help to document a programming language or programming interfaces. 
Serves as an 

online reference 

book. Notational Conventions 


bold In syntax, characters that you type exactly as shown, including commands and 
Parameters. In text, menu names and menu commands are also bold. 


bold monospace Commands that you must type exactly as shown to get the results being discussed. 
italic Variables for which you supply a specific value. For example, Filename.ext 


represents any valid file name. 


Initial Capitals Names of files should begin with an initial capital letter, for example, Filename.ext. 
(Filename.ext) Paths and folders can be uppercase, lowercase, or mixed, according to how they 
actually appear in a standard installation of the application or the operating system. 


ALL CAPITALS Used for acronyms. 


In this example, the Help topic lists typographic conventions in use for this particular language or application, 
providing the information in an easy-to-scan table. 


Guidelines 


Entry points 


- Link to specific, relevant Help topics. Don't link to the Help home page, the table of contents, a list of search results, or a page that 
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just links to other pages. Avoid linking to pages structured as a large list of frequently asked questions, because it forces users to 
search for the one that matches the link they clicked. Don't link to specific Help topics that aren't relevant and helpful to the task 
at hand. Never link to empty pages. 


- Don't put Help links on every window or page for the sake of consistency. Providing a Help link in one place doesn't mean that 
you have to provide them everywhere. 


- Use Help links for dialog boxes, error messages, wizards, and property sheets. If the Help link applies to specific controls, place it 
under them, left-aligned. If the Help link applies to the entire window, place it at the bottom left corner of the window's content area. 


System Properties 


Remote Assistance 
[] Allow Remote Assistance connections to this computer 
What happens when I enable Remote Assistance? 


Advanced... 


Remote Desktop 
Click an option, and then specify who can connect, if needed. 
@) Dont allow connections to this computer 


© Allow connections from computers running any version of 
Remote Desktop (less secure) 


© Allow connections only from computers running Remote 
Desktop with Network Level Authentication (more secure) 


Help me choose Select users... 


In this example, the second Help link applies to a group of controls. 
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f Pen and Input Devices 


|] Use flicks to perform common actions quickly and easily 


© Navigational flicks and editing 
flicks 


Customize... 


Sensitivity 
You can adjust how easily your flicks are recognized. A more 
relaxed setting may lead to accidental flicks. 


Relaxed VU Precise 


|W] Display flicks icon in the notification area 
Practice using flicks 


In this example, the Help link applies to the entire window. 
- Use Help links instead of generic textual references to Help whenever technically possible. 


Correct: 
How can | repair disk errors? 


Incorrect: 
For more information about repairing disk errors, see Help and Support. 


- Use a Help button with the Help icon for the hub pages of control panel items. Place it in the upper-right corner. These buttons 
don't have a label, but have a tooltip that reads Help. 


Tasks 


» Repair Windows using System up 
Restore 


) Create a restore point or E 
change settings de Back up files or your entire computer 


A control panel item with a Help button. 


- Fl Help is optional. Users have grown accustomed to finding Help information related to the immediate context of the UI on the 
screen by pressing the F1 key, which is labeled Help on standard keyboards. You can include F1 Help if, for example, usability 
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studies show that your users expect to find it, or your program UI is complex enough to benefit from contextual assistance. 
- Programs with menu bars can have a Help menu category. For Help menu guidelines, see Menus. 


WY Untitled - Paint 


File Edit View Image Colors 


Cs BEBE ee 
3a ae 


Help Topics 


About Paint 


In this example, the Windows Paint accessory has a Help menu category. 


- For keyboard accessibility, provide tab stops for Help buttons and links. 


« Help button and link behavior should be as follows: Help pane opens and a dedicated Help topic is displayed; the UI that invoked 
the Help pane should remain open to preserve the contextual experience. 


- Don't use the following obsolete Help entry point styles: "Learn more" or "Learn more about..." links, generic Help buttons, 
and context-sensitive Help buttons on the title bar. Although they have been used in the past, usability studies have determined 
that users tend to ignore them. Use links to specific Help topics instead. For guidelines about writing good Help links, see Help links. 


Incorrect: 


Download new add-ons for Internet Explorer 


Learn more about add-ons 


Don't use "Learn more" or "Learn more about..." links. 


Incorrect: 


Don't use generic Help buttons. 
Incorrect: 


“=| Speech Properties 


Speech Recognition | Text to Speech 
[ l 


Don't use context-sensitive Help buttons on the title bar. 
Content 


- Don't create obvious content. Help topics that repeat what is in the primary UI don't add value. 


- Don't create content that the user can't act on in some way. 
o Exception: Some conceptual content delivers important background information without necessarily leading to user action. 


Avoid vague resolutions to problems. For example, "contact your system administrator" or "reinstall the application" tend to 
frustrate users. 
o Exception: Recommend contacting the system administrator if that is the only practical solution, and system administrators expect to 
be contacted for the problem. 


- Avoid content that addresses highly unlikely user scenarios. Develop your main Help content for what you anticipate will be 
normal usage; note important exceptions to expected usage, but treat this content as a lower priority. 


Gather feedback from your users about how helpful your Help topics are. Allow users to rate individual topics. Conduct 
usability studies on your documentation to ascertain problems involving quality and discoverability of content. 
o Tip: User feedback is also a great way to generate more task-based content, focused on what users are actually doing with your 


rogram, as opposed to feature- based content, focused simply on a description of the technolo 
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- Provide multiple ways of accessing your content. A table of contents, an index, and a search mechanism are three of the most 
common methods of improving discoverability. 


- If there is more than one way to perform a task, in most cases you can just document the most common way used by 
inexperienced users. 


Icons 


- Use the Help icon only for Explorer windows and the hub pages of control panel items. Don't use the Help icon with Help links. 


Correct: 


cme 


GU -\e « Default Programs v | + | Search yas 
@ a 
Choose the programs that Windows uses 
by default 


( g&, Set your default programs 


Make a program the default for all file types and 
protocols it can open. 


See also ¥=| Associate a file type or protocol with a program 


Programs and Features Make a file type or protocol (such as .mp3 or 
http://) always open in a specific program. 


In this example, a Windows Explorer window uses a Help icon to provide access to Help. 


Incorrect: 


Check for updates 


Windows Update with Windows Ultimate 
Change settings Extras 


View update history 


Restore hidden updates '@ windows is up to date 


Updates: frequently asked 
questions 


No new updates are available for your computer. 


In this example, the Help icon on the lower-left is used incorrectly with a Help link. 
Text 
Help links 
- Provide specific information about the content of the Help topic, using as much relevant, concise text as necessary. Users often 
ignore generic Help links. Make sure the results of the link are predictable—users shouldn't be surprised by the results. 


o Exception: You can use "More information" to supplement instructions that are directly in the UI, especially if providing specific 
information in the Help link leads to unnecessary repetition or makes the link less compelling. 


Incorrect: 
A strong password has at least six mixed-case letters, numbers, and symbols. What is a strong password? 
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Correct: 
A strong password has at least six mixed-case letters, numbers, and symbols. M ore information 


In the incorrect example, the Help link is repetitive. It asks a question that is really already answered. 


- Whenever possible, phrase Help link text in terms of the primary question answered by the Help content. Don't use "Learn more 
about," "Tell me more about," or "Get help with this" phrasing. 


Incorrect: 
Learn more about adding exceptions 


Correct: 
What are the risks of allowing exceptions? 
How do! add exceptions? 


In the correct examples, the link is phrased in terms of the primary question answered by the Help topic. 


If the most relevant information can be summarized succinctly, put the summary directly in the UI instead of using a Help link. 
However, you can use a Help link to provide supplemental information. 


Incorrect: 


Enter a strong password: 


What is a strong password? 


Correct: 


Enter a strong password: 


A strong password has at least six mixed-case letters, numbers, and symbols. 


Better: 


Enter a strong password: 


A strong password has at least six mixed-case letters, numbers, and symbols. More information 


The correct example summarizes the Help information succinctly, greatly improving the likelihood that users will 
read it. The better example provides a Help link for more information on this complex subject. 


Phrase Help links to clearly indicate assistance. Help links should never read like action links. 


Use the entire Help link for the link text, not just the keywords. 


Correct: 
What are the risks of allowing exceptions? 


Incorrect: 
What are the risks of allowing exceptions? 


In the correct example, the entire Help link sentence is used for the link text. 


o Exception: Help links to external Web sites should simply use the name of the site or page as the link. Any text introducing the name 
of the site need not be included in the link itself. 


Help links don't have to match Help topic headings exactly, but there should be a strong and obvious connection between the 
two. Design links and headings in pairs for this reason. 


Correct: 
How can | improve the performance of this feature? (link text) 
Configuring this feature for optimal performance (topic heading) 


Incorrect: 


How can lim mprove the performance of this feature? (link text) 
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Complete overview of this feature (topic heading) 


In the incorrect example, the Help topic heading substantially differs in scope from the Help link text, and could be 
disorienting. 


- Ifthe Help content is online, make that clear in the link text. Doing so helps make the result of the links predictable. 


Correct: 
For additional formats and tools, go to the Microsoft Web site. 


Incorrect: 
Where can | find additional formats and tools? 


- Use complete sentences. 
- Don't use ending punctuation, except for question marks. 
- Don't use ellipses for Help links or commands. 


Help content 


- Format UI elements using bold to make them easy to identify. This is especially useful for procedural Help topics, allowing users to 
scan through procedures and quickly see pertinent UI elements. 


- Format captions using italic. This applies to tables, art, screenshots, and other graphic elements that benefit from brief 
textual explanation. 


- Refer to Help simply as Help. Generally, don't use the phrase online Help unless you are in fact referring to content on your Web site. 
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User Account Control 


A well designed User Account Control experience helps prevent unwanted system-wide changes in a way that is 
predictable and requires minimal effort. 


Design concepts 
Usage patterns 
Guidelines 
UAC shield icon 
Elevation 
Elevation UI 
Wizards 
Text 
Documentation 


With User Account Control (UAC) fully enabled, interactive administrators normally run with least user privileges, 
but they can self-elevate to perform administrative tasks by giving explicit consent with the Consent UI. Such 
administrative tasks include installing software and drivers, changing system-wide settings, viewing or changing 
other user accounts, and running administrative tools. 


In their least-privileged state, administrators are referred to as Protected administrators. In their elevated state, 
they are referred to as Elevated administrators. By contrast, Standard users can't elevate by themselves, but they 
can ask an administrator to elevate them using the Credential UI. The Built-in Administrator account doesn't 
require elevation. 


User Account Control 


(9) Do you want to allow the following program to make 
‘’ changes to this computer? 


ia Program name: Microsoft Setup Bootstrapper 


Verified publisher: Microsoft Corporation 
File origin: Network drive 


©) show detais 


Change when these notifications appear 


The Consent UI, used to elevate Protected administrators to have administrative privileges. 


User Account Control 


> Do you want to allow the following program to make 


“changes to this computer? 


fy Program name: Windows Live 
Ag. Verified publisher: Microsoft Corporation 
File origin: Downloaded from the Internet 


To continue, type an administrator password, and then click Yes. 


[User name 
| | Password 


Domain: Microsoft 


Show details [No] 


The Credential UI, used to elevate Standard users. 


UAC provides the following benefits: 


by removing unnecessary restrictions. 


current session. 


Developers: For implementation information, see Redesign Your UI for UAC Compatibility. 
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It reduces the number of programs that run with elevated privileges, therefore helping to prevent users from accidentally changing 
their system settings, and helping to prevent "malware" from gaining system-wide access. When elevation is denied, malware is 
only able to affect the current user's data. Without elevation, malware can't make system-wide changes or affect other users. 


For managed environments, well designed UAC experiences allow users to be more productive when running as Standard users 


It gives Standard users the ability to ask administrators to give them permission to perform administrative tasks within their 


For home environments, it enables better parental control over system-wide changes, including what software is installed. 
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In Windows Vista® Protected administrators can choose to be notified about all system changes or none. The 
UAC default setting is to notify about all changes, no matter what their origin. When you're notified, your 
desktop will be dimmed, and you must either approve or deny the request in the UAC dialog box before you can 
do anything else on your computer. The dimming of your desktop is referred to as the secure desktop because 


other programs can't run while it's dimmed. 


Windows®7 introduces two intermediate UAC settings for Protected administrators, in addition to the two from 
Windows Vista. The first is to notify users only when a program is making the change, so administrators are 
automatically elevated when they make a change themselves. This is the UAC default setting in Windows 7, and it 
also makes use of the secure desktop. 


The second intermediate setting in Windows 7 is the same as the first except that it doesn't use the secure 
desktop. 


CO} | « User Account Control setti... 


Choose when to be notified about changes to your computer 


User Account Control helps prevent potentially harmful programs from making 
changes to your computer. 
Tell me more about User Account Control settings 


Always notify 
= Default - Notify me only when 
programs try to make changes to my 


computer 


e@ Don't notify me when I make 
changes to Windows settings 


@_ Recommended if you use familiar 
programs and visit familiar 
websites 


Never notify ~ 


Windows 7 introduces two intermediate UAC settings. 


Note: Guidelines related to writing code to support User Account Control are presented in a separate article. 


Design concepts 
Goals 
A well designed User Account Control experience has the following goals: 


Eliminate unnecessary elevation. Users should have to elevate only to perform tasks that require administrative privileges. All 
other tasks should be designed to eliminate the need for elevation. Often legacy software requires administrator 
privileges unnecessarily by writing to the HKLM or HKCR registry sections, or the Program Files or Windows System folders. 


Be predictable. Standard users need to know which tasks require an administrator to perform or cannot be performed at all in 
managed environments. Administrators need to know which tasks require elevation. If they can't predict the need for 
elevation accurately, they are more likely to give consent for administrative tasks when they shouldn't. 


Require minimal effort. Tasks that require administrative privileges should be designed to require a single elevation. Tasks that 
require multiple elevations quickly become tedious. 


Revert to least privileges. Once a task that requires administrative privileges is complete, the program should revert to the 
least privilege state. 


Elevation task flow 
When a task requires elevation, it has the following steps: 


1. Entry point. Tasks that require immediate elevation when UAC is fully enabled have entry points marked with the UAC shield. In 
this case, users should expect to see an Elevation UI immediately after clicking such commands—and they should be extra 
cautious when they see Elevation UI from tasks that don't have a shield. 


User Accounts 
Change your account picture 
® Give other users access to this computer | @ Change account type 


In this example, the parental control and user accounts control panel items require elevation. 
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When UAC is partially enabled or turned off completely, the UAC shield is still displayed to indicate that the task 
involves system-level changes and therefore requires elevation, even if the user might not see Elevation UI. 


Always displaying the UAC shield for tasks that require elevation keeps the UI simple and predictable. 


2. Elevation. For Protected Administrators, the task requests consent using the Consent UI. For Standard users, the task 


requests administrator credentials using the Credential UI. 


User Account Control 


at ) Do you want to allow the following program to make 


& changes to this computer? 


Program name: Date and Time 
Verified publisher: Microsoft Windows 
File origin: Hard drive on this computer 


To continue, type an administrator password, and then click Yes. 


[Username name 
be. Password 


Domain: Microsoft 


Program name: 
Publisher: 
File origin: 


(¥) Show details 


MMSSETUP.EXE 
Unknown 
Network drive 


Change when these notifications appear 


( v ) Show details 


Help me decide 


[ves J [No] 


These examples show the Credential UI and the Consent UI. 


3. Separate elevated process. Internally, a new elevated process is created to perform the task. 


4. Revert to least privilege. If necessary, revert to least privilege to complete any steps that don't require elevation. 


Note that tasks don't "remember" elevated states. For example, if the user navigates back and forth over an 


elevation entry point in a wizard, the user must elevate each time. 
Usage patterns 


User Account Control has several usage patterns (in order of preference): 


1. Work for Standard users. Design the feature for all users by limiting its scope to the current user. By limiting settings to the current 
user (as opposed to system-wide), you eliminate the need for an Elevation UI entirely, and enable users to complete the task. 


Incorrect: 


Date and Time Properties 


° 
1 ) You do not have the proper privilege level to change the System Time. 


In this example, Windows XP users had to have administrative privileges to view or change the current time zone. 


Correct: 
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=. Date and Time 


Date and Time 


Date: 
Monday, April 27, 2009 


Time: 
4:59:04 PM 


| (@) Change date and time... 


Time zone 
(UTC-08:00) Pacific Time (US & Canada) 


Daylight Saving Time ends on Sunday, November 01, 2009 at 2:00 AM. The 
clock is set to go back 1 hour at that time. 


[¥] Notify me when the clock changes 


Get the latest time zone information and updates online 
How do I set the clock and time zone? 


In this example, the time zone feature was redesigned in Windows 7 and Windows Vista ®to work for all users. 


2. Have separate UI elements for Standard users and administrators. Clearly separate Standard user tasks from administrative tasks. 
Give all users access to useful read-only information. Clearly identify administrative tasks with the UAC shield. 


Computer name, domain, and workgroup settings 


Computer name: Jonathan-PC @ change settings 
Full computer name: Jonathan-PC.corp.fabrikam.com 

Computer description: 

Domain: corp.fabrikam.com 


In this example, the System control panel item shows its state to all users, but changing the system-wide settings 
requires elevation. 


3. Allow Standard users to attempt task, and to elevate on failure. If Standard users can view the information and are able to make 
some changes without elevation, allow them to access the UI and have them elevate only if the task fails. This approach is suitable 
when Standard users have limited access, such as with properties of their own files in Windows Explorer. It is also suitable for 
settings on Control Panel hybrid hub pages. 


Applying Attributes 


. Anerror occurred applying attributes to the file: 
) \\Microsoft\Widgets 
~  Accessis denied. 


Ignore | { Ignore all | [ @Retry | 


In this example, the user attempted to change program file properties but didn't have sufficient privileges. The 
user can elevate and try again. 


4. Work for administrators only. Use this approach only for administrator features and programs! If a feature is intended only 
for administrators (and has no navigation paths or useful read-only information for Standard users), you can prompt for 
administrator credentials at the entry point before showing any UI. Use this approach for lengthy wizards and page flows when all 
paths require administrative privileges. 


If the entire program is for administrators only, mark it to prompt for administrator credentials in order to 
launch. Windows displays such program icons with the UAC shield overlay. 


BP wisetup-custom 
an Windows Live Installer 


Microsoft Corporation 


In this example, the program requires administrative privileges to launch. 


Guidelines 
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UAC shield icon 


- Display controls with the UAC shield to indicate that the task requires immediate elevation when UAC is fully enabled, even if 
UAC isn't currently fully enabled. If all paths of a wizard and page flow require elevation, display the UAC shield at the task's entry 


point. Proper use of the UAC shield helps users predict when elevation is required. 


- If your program supports multiple versions of Windows, display the UAC shield if at least one version requires elevation. 
Because Windows XP never requires elevation, consider removing the UAC shields for Windows XP if you can do so consistently 


and without harming performance. 


- Don't display the UAC shield for tasks that don't require elevation in most contexts. Because this approach will sometimes 


be misleading, the preferred approach is to use a properly shielded contextual command instead. 


Ov -|i > Libraries » Pictures » Sample Pictures > 


Organize v New Folder Share with v 


a 


wr Favorites Pictures... Arrange by: Folder ¥ Includes: 2 library locations 


BE Desktop 
& Downloads 
J? MSW Intranet 


7, Recent Places 


(A Libraries 
ES} Documents 
P) Music 
fe] Pictures 
Videos 


bh 8 items 


Slide show 


Burn 


Flower 


aa 


Because the New folder command requires elevation only when used in system folders, it is displayed without a 


UAC shield. 
+ The UAC shield can be displayed on the following controls: 


Command buttons: 


| (9) Change date and time... 


A command button that requires immediate elevation. 


Command links: 


® Uninstall using recommended settings 


A command link that requires immediate elevation. 


Links: 
@® Change account type 


A link that requires immediate elevation. 


Menus: 
( Runas administrator 


A drop-down menu that requires immediate elevation. 


- Because tasks don't remember elevated states, don't change the UAC shield to reflect state. 


- Display the UAC shield even if User Account Control has been turned off or the user is using the Built-in Administrator 
account. Consistently displaying the UAC shield is easier to program, and provides users with information about the nature of the task. 


Elevation 


- Whenever possible, design tasks to be performed by Standard users without elevation. Give all users access to useful read- 


only information. 


- Elevate on a per task basis, not on a per setting basis. Don't mix Standard user settings with administrative settings in a single page 
or dialog box. For example, if Standard users can change some but not all settings, split those settings out as a separate UI surface. 
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Incorrect: 


=) Date and Time Settings 


Set the date and time: 


® date: ® Time: 


April, 2009 > 


Tu We Th Fr Sa 
a 1 2 2 4 
7 8 £9310 1 
1415 16 17 
21 22 23 24 
28 29 30 1 


@ ox): 


Set the time zone: 


Time zone: 

| (GMT-08:00) Pacific Time (US & Canada) 

Automatically adjust clock for Daylight Saving Time 
Current date and time: Thursday, April 09, 2009, 10:56 PM 


a Gens 


In this example, Standard user settings are incorrectly mixed with administrative settings. 
Correct: 
= Date and Time Settings 


Set the date and time: 


April, 2009 
Tu We Th Fr 
4 i 2 3 
7 8 £9310 
14 15 16 17 
2 22 23 24 
28 29 30 
7 8 


Change calendar settings 


In this example, the settings for changing the date and time are in a separate dialog box, available only to 
administrators. The time zone settings are available to Standard users, and are not mixed with administrative 


settings. 


- Don't consider the need to elevate when determining if a control should be displayed or disabled. This is because: 
o In unmanaged environments, assume that Standard users could elevate by asking an administrator. Disabling controls that 
require elevation would prevent users from having administrators elevate. 
o In managed environments, assume that Standard users can't elevate at all. Removing controls that require elevation would 
prevent users from knowing when to stop looking. 


+ To eliminate unnecessary elevation: 
o Ifa task might require elevation, elevate as late as possible. If a task needs a confirmation, display the elevation UI only after the 


user has confirmed. If a task always requires elevation, elevate at its entry point. 

o Once elevated, stay elevated until elevated privileges are no longer necessary. Users shouldn't have to elevate multiple times 
to perform a single task. 

o If users must elevate to make a change but choose not to make any changes, leave the positive commit buttons enabled but 
handle the commit as a cancel. Doing so eliminates users having to elevate just to close a window. 


Incorrect: 
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Customer Experience Improvement Program 


. “ll Do you want to participate in the Windows Customer Experience 
"Improvement Program? 


The program helps Microsoft improve Windows. Without interrupting you, it collects 
information about your computer hardware and how you use Windows. The program also 
periodically downloads a file to collect information about problems you might have with 
Windows. The information collected is not used to identify or contact you. 


Read the privacy statement online 


@ Yes, I want to participate in the program. 
© No, I don't want to participate in the program. 


() Save Changes 


In this example, the Save Changes button is disabled to avoid an unnecessary elevation, but becomes enabled 
when users change the selection. However, the disabled commit button makes it look like users really don't have a 
choice. 


- Don't display an error message when tasks fail because users chose not to elevate. Assume that users intentionally chose not 
to proceed, so they won't regard this situation as an error. 


Incorrect: 


Fabrikam Restore 


[x] Fabrikam Restore can't run 


You don't have permission to perform a system 
restore. 


In this example, Fabrikam Restore incorrectly gives an error message when the user decides to not elevate. 


Don't display warnings to explain that users might need to elevate their privileges to perform tasks. Let users discover this fact 
on their own. 


Display the UAC shield and elevation UI based on the following table: 


Object Circumstance |Where to put UAC shield When to 

elevate 

Program |Entire Display 
program is for Ls a GETS elevation UI 
administrators A Windows Live Installer at launch. 
only. Microsoft Corporation 

UAC shield overlay on program icon. 

Command |Entire . Displa' 
command is @ Change account type Sveti Ul 
for UAC shield on command button or link. when 
administrators command 
only. button or link 

is clicked, but 
after any 
confirmations. 

Command Command Computer name, domain, and workgroup settings Display 
displays - elevation UI 
useful read- Computer name: Jonathan-PC @ Change settings when 
Be ation Full computer name: Jonathan-PC.corp.fabrikam.com Sota 
appropriate Computer description: clicked, but 
for all users, Domain: corp.fabrikam.com after ay. 
but changes confirmations. 
require UAC shield on command button or link to make changes. 
administrative 
privileges. 

Command |Standard Display 
users can elevation Ul 
view the when user 
information retries the 
and possibly command. 
make some 
changes 
without 
elevation. 

Allow 
Standard 
users to 
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to elevate on 


Elevation UI 


. If the user provides an account that isn't valid (name or password) or doesn't have administrator privileges, just redisplay 


the Credential UI. Don't display an error message. 


« Ifthe user cancels the Credential UI, return the user back to the original UI. Don't display an error message. 
+ If User Account Control has been turned off and a Standard user attempts to perform a task that requires elevation, provide an 


error message that states "This task requires administrator privileges. To perform this task, you must log on using an 
administrator account." 


Device Manager 


(x) This task requires administrator 
~ privileges 


To perform this task, you must log on using an 
administrator account. 


In this example, User Account Control has been turned off so an error message explains that the user must use an 
administrator account. 


Wizards 


- Don't elevate multiple times. Once a wizard is elevated, it should stay elevated. 


+ If the task is performed within the wizard, put a UAC shield on the Commit page's "Next" button (which should be given a more 


specific label). When the user commits: 
o If the next page is a Progress page, advance to that page and modally display the elevation UI. After successful elevation, perform 
the task. 


> If the next page is a Completion page, advance to that page (but temporarily replace its contents with "Waiting for permission...") 


and modally display the elevation UI. After successful elevation, perform the task, and then display the Completion page contents. 


> If the user cancels the elevation UI, return to the Commit page. Doing so allows the user to try again. 


« If the task is performed after the wizard completes, put a UAC shield on the Commit page's "Finish" button (which should be given 


amore specific label). When the user commits: 
> Remain on the Commit page and modally display the elevation UI. After successful elevation, close the wizard. 


o If the user cancels the elevation UI, return to the Commit page. Doing so allows the user to try again. 


« For lengthy wizards intended only for administrators, you can prompt for administrator credentials at the entry point before 


Text 


showing any Ul. 


Don't use an ellipsis just because a command requires elevation. The need to elevate is indicated with the UAC shield. 


Documentation 


When referring to User Account Control: 


Refer to the feature as User Account Control (on first mention) or UAC (on subsequent mention), not Least-privileged User Account 
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failure. Applying Attributes 
“@ Anerror occurred applying attributes to the file: 
) \\Microsoft\Widgets 
—  Accessis denied. 
| Ignore | | Ignore all | | @ Retry | 
Don't show the UAC shield for the command, but show it for the elevation entry point if the command fails. 

Task step |All Display 
subsequent elevation UI 
steps require when Next or 
elevation. other commit 

button is 
UAC shield on Next button (or equivalent). clicked. 

Task step |Some Display 
branches _ ‘ i ‘ elevation UI 
require ® Uninstall using recommended settings When 
elevation. command 

> . : links with 
This program uninstalled correctly UAC shield 
UAC shield on command links that require elevation. are clicked. 
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or LUA. 
« Refer to non-administrators as Standard users. 
« Refer to built-in computer administrators as Built-in administrators. 


In user documentation: 
- Refer to the act of giving consent to perform an administrative task as giving permission. 
In programming and other technical documentation: 


- Refer to the act of giving consent to perform an administrative task as elevation. 


- Inthe context of UAC, refer to administrators as Protected administrators when not elevated, and Elevated administrators 
after elevation. 


- Refer to the dialog box used to enter passwords as the Credential UI. Refer to the dialog box used to give consent as the Consent 
UI. Refer to both generally as Elevation UI. 
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Visual Index 


Controls 

Commands 

Pointers 

Windows 

Windows Environment 
Visuals 


Here are visual examples of many user interface elements discussed in UX Guide. Click each image to go to the 


guidelines article for a particular element. 
Controls 


Common controls 


Enter PIN 


A Caps Lock is on 


Having Caps Lock on may cause you to enter your password incorrectly. 


Press Caps Lock to turn it off before entering your password. 


Balloon 


|] Clock 
lolume 
[| Network 


[ } Power 


Check boxes 


Command button 


> Browse the Internet now i 


> Set up a new connection anyway 


Command links 
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Drop-down list and combo box 


Privacy 
[¥] Store and display a list of recently opened files 
[¥] Store and display a list of recently opened programs 


Group box 


Use the computer without a dis my 


Link 


List of valid modes: 


1680 by 1050, True Color (32 bit), 60 Hertz 
1680 by 1050, High Color (16 bit), 60 Hertz 
1680 by 1050, 256 Colors, 60 Hertz 

1280 by 1024, True Color (32 bit), 60 Hertz 


1280 by 1024, High Color (16 bit), 60 Hertz 
1280 by 1024, 256 Colors, 60 Hertz 
1280 by 800, True Color (32 bit), 60 Hertz 
1280 by 800, High Color (16 bit), 60 Hertz 
1280 by 800, 256 Colors, 60 Hertz 


List box 


Autumn Leaves 


i 


Desert Landscape 


Fy 
a 


Forest Flowers 
Frangipani Flowers 


Pee eee 


List view 


Found Windows Media Center Extender 
Click here for more information. 
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Notification 


from Pictures (D:\User...\Pictures) to Pictures (D:\User...\Pictures) 
Calculating time remaining... 


ug 


Progress bar 


(v) (a) v~> Barpva»n « 


Progressive disclosure controls 


@ Display as a link 
Display as a menu 
n't display this item 


Radio buttons 


Search box 


Slider 


Spin control 


Work Offline 
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Download Full Items 
Download Headers and then Full Items 
¥___ Download Headers 


On Slow Connections Only Download Headers 
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Status bar 


Tabs 


Display name: 


Text box 


Print (Ctrl+P) 


Tooltip 


Infotip 


4 Desktop 
> [BB Jonathan 
> )) Public 
41 Computer, 
> a Local Disk (C:) 
> £& New Volume (D:) 
> &3 DVD Drive (F:) 
(€& My Sharing Folders 
> & Network 
> [By Control Panel 
‘& Recycle Bin 
New Folder 


Tree view 


Commands 
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Auto Arrange 
Align to Grid 
Expand All Groups 
Collapse All Groups 
Sort By 
Group By » 
Stack By Total Size 


Choose Details... sca ina 
Go To Ascending 
Refresh Descending 


More... 


Menu 


Toolbar 


Ribbon 


sat Uninstall or chance program 
aU Stallor chanctk a prograt 


Styles > Styles ~ 
Styles 


Pointers 
Neg 


Working in background 
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Activity indicator 


Windows 


Windows Help and Support 


Do you want to get the latest online 
content when you search Help? 
If you choose No, when you search Help you will get 


only the content that came with your version of 
Windows. 


Cves_}([_No_] 


Microsoft cares about your privacy. Read the privacy 
statement online 


Dialog box 
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0 Files, 0 Folders 


Today, July 29, 2007, 3 minutes ago 


Bi Fond ony 


[©] Hidden 


Property window 


A Change your battery or switch to outlet power immediately 


Your computer has a low battery, so you should act immediately to keep 
from losing your work. 


Warning message 


Do you want to save changes to C:\New 
document.txt? 
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Confirmation 


Windows Environment 


Gadget (detailed/floating) 


Gadget (concise/ docked) 


Control Panel L-|Personalization 


Taskbar 


Security 
Check for updates 


ry] Allow a program through Windows Firewall 


User Account Control entry points 


rs 


wt 


\_ »/ A program needs your permission to continue 


Ifyou started this program, continue. 


Windows Live Messenger 


Microsoft Corporation 


ieee Geom] Cosa] 


User Account Control helps stop unauthorized changes to your computer. 
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User Account Control consent UI 


Visuals 


1 @ | Untitled - Notepad 


aa | Fite Edit Format View Help 


Window frame 


abcdefghijklmnoparstuvwxyz 
ABCDEFGHUKLMNOPQRSTUVWXYZ 


Fonts (Segoe Ul) 


Standard icons 
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Glossary 


A|B/C|D|E|F/G/H/I|J| K/L|M 
N/O|P/Q|R{| S| TUL Vi] WI] XxX] ¥{z 


A 
About box 


A dialog box providing general program information, such as version identification, copyright, licensing 
agreements, and ways to access technical support. 


above the fold 


A screen layout metaphor taken from newspaper journalism. The content above the fold of the newspaper must 
be particularly engaging to spur sales. Similarly, in screen layout, the most important content must be visible 
without scrolling. Users must be motivated to take the time to scroll past the content they encounter initially 
"above the fold." 


access key 


An alphanumeric key that, when combined with the Alt key, activates a control. Access keys are indicated by 
underlining one of the characters in the control's label. For example, pressing Alt+O activates a control whose 
label is "Open" and whose assigned access key is "O". Access keys aren't case sensitive. The effect of activating a 
control depends on the type of control. 


In contrast to shortcut keys, which are intended mostly for advanced users, access keys are designed to improve 
accessibility. Because they are documented directly within the user interface (UI) itself, they can't always be 
assigned consistently and they aren't intended to be memorized. 


active monitor 
The monitor where the active program is running. 
address bar 


A navigational element, usually appearing at the top of a window, that displays, and allows users to change, their 
current location. See also: breadcrumb bar. 


affordance 


Visual properties of an object that indicate how it can be used or acted on. For example, command buttons have 
the visual appearance of real-world buttons, suggesting pushing or clicking. 


application 


A program used to perform a related set of user tasks; often relatively complex and sophisticated. See also: 
program. 


© 2010, Microsoft Corporation. All rights reserved. Page 860 of 882 


application key 


A keyboard key with a context menu graphic on it. This key is used to display the context menu for the selected 
item. 


application menu 


A control that presents a menu of commands that involve doing something to or with a document or workspace, 
such as file-related commands. 


Displays the context menu for the current selection (the same as pressing Shift+F10). 
application theming 


Using related visual techniques, such as customized controls, to create a unique look or branding for an 
application. 


aspect ratio 


An expression of the relation between the width of an object and its height. For example, high definition 
television uses a 16:9 aspect ratio. 


auto-complete 


A type of list used in text boxes and editable drop-down lists in which the likely input can be extrapolated and 
populated automatically from having been entered previously. Users type a minimal amount of text to populate 
the auto-complete list. 


auto-exit 


A text box in which the input focus automatically moves to the next related text box as soon as a user types the 
last character. 


B 

balloon 

A common Windows control that informs users of a non-critical problem or special condition. 
breadcrumb bar 


A navigational element, usually appearing at the top of a window, that displays, and allows users to change, their 
current location. "Breadcrumb" refers to breaking the current location into a series of links separated by arrows 
that users can interact with directly. Use address bar instead. See also: address bar. 


C 


check box 


A common Windows control that allows users to decide between clearly differing choices, such as toggling an 
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option on or off. 
chevron 


A small control or button that indicates there are more items than can be displayed in the allotted space. Users 
click the chevron to see the additional items. 


child window 


A window, such as a control or pane, that is contained completely within another window, referred to as the 
parent window. See also: parent window, owned window. 


cleared 


In a check box, indicates that the option is not set. See also: selected, mixed state. 


combo box 


A common Windows control that combines the characteristics of a drop-down list or standard list box, and an 
editable text box. See also: list box, drop-down list. 


command area 


The area in a window where the commit buttons are located. Typically, dialog boxes and wizards have a 
command area. See also: commit button. 


command button 
A common Windows control that allows users to initiate an action immediately. 
command link 


A control used to make a choice among a set of mutually exclusive, related choices. In their normal state, 
command links have a lightweight appearance similar to hyperlinks, but their behavior is more similar to 
command buttons. 


commit button 


A command button used to commit to a task, proceed to the next step in a multi-step task, or cancel a task. See 
also: command area. 


commit page 


A type of wizard page in which users commit to performing the task. After doing so, the task cannot be undone 
by clicking Back or Cancel buttons. 


completion page 


A wizard page used to indicate the end of a wizard. Sometimes used instead of Congratulations pages. See also: 
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congratulations page. 


congratulations page 

A wizard page used to indicate the end of a wizard. These pages are no longer recommended. Wizards conclude 
more efficiently with a commit page or, if necessary, a follow-up or completion page. See also: commit page, 
completion page, follow-up page. 


Consent UI 


A dialog box used by User Account Control (UAC) that allows protected administrators to elevate their privileges 
temporarily. 


constraint 


In controls that involve user input, such as text boxes, input constraints are a valuable way to prevent errors. For 
example, if the only valid input for a particular control is numeric, the control can use appropriate value 
constraints to enforce this requirement. 


content area 


The portion of Ul surfaces, such as dialog boxes, control panel items, and wizards, devoted to presenting options, 
providing information, and describing controls. Distinguished from the command area, task pane, and navigation 
area. 


contextual tab 


A tab containing a collection of commands that are relevant only when the user has selected a particular object 
type. See also: Ribbon. 


Control Panel 


A Windows program that collects and displays for users the system-level features of the computer, including 
hardware and software setup and configuration. From Control Panel, users can click individual items to configure 
system-level features and perform related tasks. See also: control panel item. 


control panel item 


An individual feature available from Control Panel. For example, Programs and Ease of Access are two control 
panel items. 


Credential Ul 


A dialog box used by User Account Control (UAC) that allows standard users to request temporary elevation of 
their privileges. 


Critical 


The highest degree of severity. For example, in error and warning messages, critical circumstances might involve 
data loss, loss of privacy, or loss of system integrity. 
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custom icon 

A pictorial representation unique to a program (as opposed to a Windows system icon). 
custom visuals 

Graphics, animations, icons, and other visual elements specially developed for a program. 
D 

default command button or link 


The command button or link that is invoked when users press the Enter key. The default command button or link 
is assigned by the developer, but any command button or link becomes the default when users tab to it. 


default monitor 
The monitor with the Start menu, taskbar, and notification area. 
delayed commit model 


The commit model used by control panel item spoke pages where changes aren't made until explicitly committed 
by users clicking a commit button. Thus, users can abandon a task, navigating away using the Back button, Close, 
or the Address bar. See also: immediate commit model. 


desktop 


The onscreen work area provided by Windows, analogous to a physical desktop. See also: work area. 


destructive command 
An action that has a widespread effect and cannot be undone easily, or is not immediately noticeable. 
details pane 


The pane at the bottom of a Windows Explorer window that displays details (if any) about the selected items; 
otherwise, it displays details about the folder. For example, Windows Photo Gallery displays the picture name, 
file type, date taken, tags, rating, dimensions, and file size. See also: preview pane. 


dialog box 


A secondary window that allows users to perform a command, asks users a question, or provides users with 
information or progress feedback. 


dialog box launcher 


In aribbon, a button at the bottom of some groups that opens a dialog box with features related to the group. 
See also: Ribbon. 
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dialog unit 
A dialog unit (DLU) is the device-independent measure to use for layout based on the current system font. 
direct manipulation 


Direct interaction between the user and the objects in the UI (such as icons, controls, and navigational elements). 
The mouse and touch are common methods of direct manipulation. 


docked window 
A window that appears at a fixed location on the edge of its owner window. See also: floating window. 
drop-down arrow 


The arrow associated with drop-down lists, combo boxes, split buttons, and menu buttons, indicating that users 
can view the associated list by clicking the arrow. 


drop-down list 


A common Windows control that allows users to select among a list of mutually exclusive values. Unlike a list box, 
this list of available choices is normally hidden. 


E 
effective resolution 


The physical resolution of a monitor normalized by the current dpi (dots per inch) setting. At 96 dpi, the effective 
resolution is the same as the physical resolution, but in other dpis, the effective resolution must be scaled 
proportionately. Generally, the effective resolution can be calculated using the following equation: 


Effective resolution =Physical resolution x (96 / current dpi setting) 
See also: relative pixels, physical resolution. 
elevated administrator 


In User Account Control, elevated administrators have their administrator privileges. Without elevating, 
administrators run in their least-privileged state. The Consent UI dialog is used to elevate administrators to 
elevated status only when necessary. See also: protected administrator, standard user. 


enhanced tooltip 


A pop-up window that concisely explains the command being pointed to. Like regular tooltips, enhanced tooltips 
may provide the shortcut key for the command. But unlike regular tooltips, they may also provide supplemental 
information, graphics, and an indicator that Help is available. They may also use rich text and separators. See 
also: tooltip. 


error 
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A state in which a problem has occurred. See also: warning. 


expandable headings 


A progressive disclosure chevron pattern where a heading can be expanded or collapsed to reveal or hide a group 
of items. See also: progressive disclosure. 


extended selection 


In list views and list boxes, a multiple selection mode where selection of a single item can be extended by 
dragging or with Shift-+click or Ctrl+click to select groups of contiguous or non-adjacent values, respectively. See 
also: multiple selection. 


flick 


A quick, straight stroke of a finger or pen on a screen. A flick is recognized as a gesture, and interpreted as a 
navigation or an editing command. 


floating window 


A window that can appear anywhere on the screen the user wants. See also: docked window. 


flyout 


A popup window that temporarily shows more information. On the Windows desktop, flyouts are displayed by 
clicking on a gadget, and dismissed by clicking anywhere outside the flyout. You can use flyouts in both the 
docked and floating states. 


follow-up page 


A wizard page used to present related tasks that users are likely to do as follow-up. Sometimes used instead of 
congratulations pages. 


font 

A set of attributes for text characters. 

full screen 

A maximized window that does not have a frame. 

G 

gadget 

A simple mini-application hosted on the user's desktop. See also: Sidebar. 
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gallery 


A list of commands or options presented graphically. A results-based gallery illustrates the effect of the 
commands or options instead of the commands themselves. M ay be labeled or grouped. For example, formatting 
options can be presented in a thumbnail gallery. 


gesture 


A quick movement of a finger or pen on a screen that the computer interprets as a command, rather than as a 
mouse movement, writing, or drawing. 


getting started page 


An optional wizard page that outlines prerequisites for running the wizard successfully or explains the purpose of 
the wizard. 


glass 


A window frame option characterized by translucence, helping users focus on content and functionality rather 
than the interface surrounding it. 


glyph 


A generic term used to refer to any graph or symbolic image. Arrows, chevrons, and bullets are glyphs commonly 
used in Windows. 


group box 

A common Windows control that shows relationships among a set of related controls. 
H 

handwriting recognition 

Software that converts ink to text. 

Help 


User assistance of a more detailed nature than is available in the primary UI. Typically accessed from a menu or 
by clicking a Help link or icon, this content may take a variety of forms, including step-by-step procedures, 
conceptual text, or more visually-based, guided tutorials. 


high-contrast mode 


A special display setting that provides extreme contrast for foreground and background visual elements (either 
black on white or white on black). Particularly helpful for accessibility. 


hub page 


In control panel items, a hub page presents high-level choices, such as the most commonly used tasks (as with 
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task-based hub pages) or the available objects (as with object-based hub pages). Users can navigate to spoke 
pages to perform specific tasks. See also: spoke page. 


hybrid hub page 


In control panel items, a hybrid hub page is a hub page that also has some properties or commands directly on it. 
Hybrid hub pages are strongly recommended when users are most likely to use the control panel item to access 
those properties and commands. 


I 
immediate commit model 


The commit model used by hybrid hub pages where changes take effect as soon as users make them. Commit 
buttons aren't used in this model. See also: delayed commit model. 


in-place message 


A message that appears in the context of the current UI surface, instead of a separate window. Unlike separate 
windows, in-place messages require either available screen space or dynamic layout. 


indirect dialog box 


A dialog box displayed out of context, either as an indirect result of a task or as the result of a problem with a 
system or background process. 


inductive user interface 
A UI that breaks a complex task down into simple, easily explained, clearly stated steps with a clear purpose. 
infotip 


A small pop-up window that concisely describes the object being pointed to, such as descriptions of toolbar 
controls, icons, graphics, links, Windows Explorer objects, Start menu items, and taskbar buttons. Infotips are a 
form of progressive disclosure, eliminating the need to have descriptive text on screen at all times. 


ink 


The raw output for a pen. This digital ink can be kept just as written, or it can be converted to text using 
handwriting recognition software. 


inline 


Placement of links or messages directly in the context of its related UI. For example, an inline link occurs within 
other text instead of separately. 


input focus 
The location where the user is currently directing input. Note that just because a location in the UI is highlighted 


does not necessarily mean this location has input focus. 
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instance 


A program session. For example, Windows Internet Explorer allows users to run multiple instances of the 
program because users can have several independent sessions running at a time. Settings can be saved across 
program sessions. See also: persistence. 


J 
K 


keytip 


In aribbon, the mechanism used to display access keys. The access keys appear in the form of a small tip over 
each command or group, as opposed to the underlined letters typically used to display access keys. See also: 
access key. 


landscape mode 


A presentation option that orients an object to be wider than it is tall. See also: portrait mode. 


least- privilege user account 


A user account that normally runs with minimal privileges. See also: User Account Control. 


list box 


A common Windows control that allows users to select from a set of values presented in a list, which, unlike a 
drop-down list, is always visible. Supports single or multiple selections. 


list view 


A common Windows control that allows users to view and interact with a collection of data objects, using either 
single selection or multiple selection. 


live preview 


A preview technique that shows the effect of a command immediately on selection or hover without the user 
commiting the action. For example, formatting options such as themes, fonts, and colors benefit from live 
previews by showing users the effect with minimal effort. 


localization 

The process of adapting software for different countries, languages, cultures, or markets. 

log file 

A file-based repository for information of various kinds about activity on a computer system. Administrators 


often consult log files; ordinary users generally do not. 
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M 
main instruction 


Prominently displayed text that concisely explains what to do in the window or page. The instruction should bea 
specific statement, imperative direction, or question. Good main instructions communicate the user's objective 
rather than focusing just on manipulating the UI. 


managed environment 


A networked computer environment managed by an IT department or third-party provider, instead of by 
individual users. Administrators may optimize performance and apply operating system and application updates, 
among other tasks. 


manipulation 


A type of touch interaction in which input corresponds directly to how the object being touched would react 
naturally to the action in the real world. 


maximize 


To display a window at its largest size. See also: minimize, restored window. 


menu 
A list of commands or options available to users in the current context. 

message box 

A secondary window that is displayed to inform a user about a particular condition. 
mini-toolbar 

A contextual toolbar displayed on hover. 

minimize 

To hide a window. See also: maximize, restored window. 

mixed state 


For check boxes that apply to a group of items, a mixed state indicates that some of the items are selected and 
others are cleared. 


modal 


Restrictive or limited interaction due to operating in a mode. M odal often describes a secondary window that 
restricts a user's interaction with the owner window. See also: modeless. 
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modeless 


Non-restrictive or non-limited interaction. M odeless often describes a secondary window that does not restrict a 
user's interaction with the owner window. See also: modal. 


multiple selection 

The ability for users to choose more than one object in a list or tree. 
N 

non-critical system event 


A type of system event that does not require immediate attention, often pertaining to system status. See also: 
critical. 


notification 


Information of a non-critical nature that is displayed briefly to the user; a notification takes the form of a balloon 
from an icon in the notification area of the taskbar. 


O 
opt in 
The ability for users to select optional features explicitly. Less intrusive to users than opt-out, especially for 


privacy and marketing related features, because there is no presumption of users' wishes. See also: opt out, 
options. 


opt out 

The ability for users to remove features they don't want by clearing their selection. M ore intrusive to users than 
opt-in, especially for privacy and marketing related features, because there is an assumption of users' wishes. See 
also: opt in, options. 


options 


Choices available to users for customizing a program. For example, an Options dialog box allows users to view 
and change program options. See also: properties. 


out-of-context Ul 


Any UI displayed in a pop-up window that isn't directly related to the user's current activity. For example, 
notifications and the Consent UI for User Access Control are out-of-context UI. 


owned window 


A secondary window used to perform an auxiliary task. It is not a top-level window (so it isn't displayed on the 
taskbar); rather, it is "owned" by its owner window. For example, most dialog boxes are owned windows. See 
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also: child window, owner window. 


owner control 


The source of a tip, balloon, or flyout. For example, a text box that has input constraints might display a balloon 
to let the user know of these limitations. In this case, the text box is considered the owner control. 


owner window 


A window from which an owned window originates. Appears beneath the owned window in Z order. See also: 
owned window, parent window, Z order. 


P 


page 


A basic unit of navigation for task-based UI, such as wizards, property sheets, control panel items, and Web sites. 
Users perform tasks by navigating from page to page within a single host window. See also: page flow, window. 


page flow 


A collection of pages in which users perform a task. See also: page, task, wizard, Control Panel. 


page space control 


Allows users to view and interact with a hierarchically arranged collection of objects. Page space controls are like 
tree controls, but they have a slightly different visual appearance. They are used primarily by Windows Explorer. 


palette window 


A modeless secondary window that displays a toolbar or other choices, such as colors, patterns, fonts, or font 
attributes. 


pan 


To move a scene, such as a map or photo, in two dimensions by dragging it directly. This differs from scrolling in 
two ways: scrolled content usually has one predominant dimension and often scrolls only along that dimension; 
and scrolling content conventionally appears with scroll bars that the user drags in the opposite direction of the 
scrolling motion. 


pane 


A rectangular area within a window that users may be able to move, resize, hide, or close. Panes are always 
docked to the side of their parent window. They can be adjacent to other panes, but they never overlap. 
Undocking a pane converts it to a child window. See also: window. 


parent window 


The container of child windows (such as controls or panes). See also: owner window. 
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pen 


A stylus used for pointing, gestures, simple text entry, and free-form handwriting. Pens have a fine, smooth tip 
that supports precise pointing, writing, or drawing in ink. They may also have an optional pen button (used to 
perform right-clicks) and eraser (used to erase ink). 


persistence 
The principle that the state or properties of an object is automatically preserved. 
personalization 


Customizing a core experience that is crucial to the user's personal identification with a program. By contrast, 
ordinary options and properties aren't crucial to the user's personal identification with a program. 


personas 


Detailed descriptions of imaginary people. Personas are constructed out of well-understood, highly specified data 
about real people. 


physical resolution 
The horizontal and vertical pixels that can be displayed by a computer monitor's hardware. 
pop-up group button 


In aribbon, amenu button that consolidates all the commands and options within a group. Used to display 
ribbons in small spaces. 


portrait mode 


A presentation option that orients an object to be taller than it is wide. See also: landscape mode. 


preferences 


Don't use. Use options or properties instead. 


preview 


A representation of what users will see when they select an option. Previews can be displayed statically as part of 
the option, or upon request with a Preview or Apply button. 


preview pane 
A window pane used to show previews and other data about selected objects. 
primary command 


A central action that fulfills the primary purpose of a window. For example, Print is a primary command for a 
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Print dialog box. See also: secondary command. 


primary toolbar 


A collection of commands designed to be comprehensive enough to preclude the use of a menu bar. See also: 
supplemental toolbar. 


primary window 


A primary window has no owner window and is displayed on the taskbar. Main program windows are always 
primary windows. See also: secondary window. 


program 


A sequence of instructions that can be executed by a computer. Common types of programs include productivity 
applications, consumer applications, games, kiosks, and utilities. 


progress bar 
A common Windows control that displays the progress of a particular operation as a graphical bar. 
progressive disclosure 


A technique of allowing users to display less commonly used information (typically, data, options, or commands) 
as needed. For example, if more options are sometimes needed, users can expose them in context by clicking a 
chevron button. 


progressive escalation 


A sequence in which the UI used to inform users becomes progressively more obtrusive as the event becomes 
more critical. For example, a notification can be used for an event that users can safely ignore at first. As the 
situation becomes critical, a more obtrusive UI such as a modal dialog should be used. 


prompt 


A label or short instruction placed inside a text box or editable drop-down list as its default value. Unlike static 
text, prompts disappear once users type something into the control or it gets input focus. 


properties 


Settings of an object that users can change, such as a file's name and read-only status, as well as attributes of an 
object that users can't directly change, such as a file's size and creation date. Typically properties define the state, 
value, or appearance of an object. 


protected administrator 


In User Account Control, an administrator running in their least-privileged state. See also: elevated 
administrator, standard user. 


Q 
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Quick Access Toolbar 
A small, customizable toolbar that displays frequently used commands. 
Quick Launch bar 


A direct access point on the Windows desktop, located next to the Start button, populated with icons for 
programs of the user's choosing. Removed in Windows 7. 


R 

radio button 

A common Windows control that allow users to select from among a set of mutually exclusive, related choices. 
relative pixels 


A device-independent metric that is the same as a physical pixel at 96 dpi (dots per inch), but proportionately 
scaled in other dpis. See also: effective resolution. 


restored window 


A visible, partial-screen window, neither maximized nor minimized. See also: maximize, minimize. 


ribbon 
A tabbed container of commands and options, located at the top of a window or work area and having a fixed 


location and height. Ribbons usually have an Application menu and Quick Access Toolbar. See also: menu, 
toolbar. 


risky action 


A quality of user action that can have negative consequences and can't be easily undone. Risky actions include 
actions that can harm the security of a computer, affect access to a computer, or result in unintended loss of data. 


S 
scan path 


The route users are likely to take as they scan to locate things in a window. Particularly important if users are not 
engaged in immersive reading of text. 


screen reader 


An assistive technology that enables users with visual impairments to interpret and navigate a user interface by 
transforming visuals to audio. Thus, text, controls, menus, toolbars, graphics, and other screen elements are 
spoken by the computerized voice of the screen reader. 
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scroll bar 
A control that allows users to scroll the content of a window, either vertically or horizontally. 
secondary command 


A peripheral action that, while helpful, isn't essential to the purpose of the window. For example, Find Printer or 
Install Printer are secondary commands for a Print dialog box. See also: primary command. 


secondary window 


A window that has an owner window and consequently is not displayed on the taskbar. See also: primary 
window. 


secure desktop 


A protected environment that is isolated from programs running on the system, used to increase the security of 
highly secure tasks such as log on, password changes, and UAC Elevation UI. See also: User Account Control. 


security shield 

A shield icon used for security branding. 

selected 

Chosen by the user in order to perform an operation; highlighted. 
sentence-style capitalization 

For sentence-style capitalization: 


- Always capitalize the first word of a new sentence. 


- Don't capitalize the word following a colon unless the word is a proper noun, or the text following the colon is 
a complete sentence. 


- Don't capitalize the word following an em-dash unless it is a proper noun, even if the text following the dash 
is acomplete sentence. 


- Always capitalize the first word of a new sentence following any end punctuation. Rewrite sentences that 
start with a case-sensitive lowercase word. 


settings 
Specific values that have been chosen (either by the user or by default) to configure a program or object. 
shortcut key 


Keys or key combinations that users can press for quick access to actions they perform frequently. Ctrl Hetter 
combinations and function keys (F1 through F12) are usually the best choices for shortcut keys. By definition, a 
shortcut key is the keyboard equivalent of functionality that is supported adequately elsewhere in the interface. 
Therefore, avoid using a shortcut key as the only way to access a particular operation. 
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In contrast to access keys, which are designed to improve accessibility, shortcut keys are designed primarily for 
advanced users. Because they aren't documented directly within the UI itself (although they might be 
documented in menus and toolbar tooltips), they are intended to be memorized and therefore they must be 
assigned consistently within applications and across different applications. 


Sidebar 


A region on the side of the user's desktop used to display gadgets in Windows Vista. See also: gadget. 


single-point error 


A user input error relating to a single control. For example, entering an incorrect credit card number is a single- 
point error, whereas an incorrect logon is a double-point error, because either the user name or password could 
be the problem. 


slider 


A common Windows control that displays and sets a value from a continuous range of possible values, such as 
brightness or volume. 


special experience 


In programs, special experiences relate to the primary function of the program, something unique about the 
program, or otherwise make an emotional connection to users. For example, playing an audio or video is a special 
experience for a media player. 


spin box 


The combination of a text box and its associated spin control. Users click the up or down arrow of a spin box to 
increase or decrease a numeric value. Unlike slider controls, which are used for relative quantities, spin boxes are 
used only for exact, known numeric values. 


spin control 


A control that users click to change values. Spin controls use up and down arrows to increase or decrease the 
value. 


splash screen 
Transitional screen image that appears as a program is in the process of launching. 
split button 


A bipartite command button that includes a small button with a downward pointing triangle on the rightmost 
portion of the main button. Users click the triangle to display variations of a command in a drop-down menu. See 
also: command button. 


spoke page 
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In control panel items, spoke pages are the place in which users perform tasks. Two types of spoke pages are task 
pages and form pages: task pages present a task or a step in a task with a specific, task-based main instruction; 
form pages present a collection of related properties and tasks based on a general main instruction. See also: hub 
page. 

standard user 


In User Account Control, standard users have the least privileges on the computer, and must request permission 
from an administrator on the computer in order to perform administrative tasks. In contrast with protected 
administrators, standard users can't elevate themselves. See also: elevated administrator, protected 


administrator. 


static text 


User interface text that is not part of an interactive control. Includes labels, main instructions, supplemental 
instructions, and supplemental explanations. 


supplemental instructions 


An optional form of user interface text that adds information, detail, or context to the main instruction. See also: 
main instruction. 


supplemental toolbar 


A collection of commands designed to work in conjunction with a menu bar. See also: primary toolbar. 


system color 


A color defined by Windows for a specific purpose, accessed using the GetSysColor application programming 
interface (API). For example, COLOR_WINDOW defines the window background color and COLOR_WINDOWTEXT 
defines the window text color. System colors are not as rich as theme colors. See also: theme color. 


system menu 


A collection of basic window commands, such as move, size, Maximize, minimize, and close, available from the 
program icon on the title bar, or by right-clicking a taskbar button. 


T 
tabbed dialog 


A dialog box that contains related information on separate labeled pages (tabs). Unlike property sheets, which 
also often contain tabs, tabbed dialog boxes are not used to display an object's properties. See also: properties. 


task 


A unit of user activity, often represented by a single UI surface (such as a dialog box), or a sequence of pages 
(such as a wizard). 
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task dialog 

A dialog box implemented using the task dialog API. Requires Windows Vista®or later. 

task flow 

A sequence of pages that helps users perform a task, either in a wizard, explorer, or browser. 
task link 


A link used to initiate a task, in contrast to links that navigate to other pages or windows, choose options, or 
display Help. 


task pane 


A type of UI similar to a dialog box, except that it is presented within a window pane instead of a separate 
window. As a result, task panes have a more direct, contextual feel than dialog boxes. A task pane can contain a 
menu to provide the user with a small set of commands related to the selected object or program mode. 


taskbar 


The access point for running programs that have a desktop presence. Users interact with controls called taskbar 
buttons to show, hide, and minimize program windows. 


text box 
A control specifically designed for textual input; allows users to view, enter, or edit text or numbers. 
theme color 


A color defined by Windows for a specific purpose, accessed using the GetThemeColor API along with parts, 
states, and colors. For example, the windows part defines a FillColor and a TextColor. Theme colors are richer 
than system colors, but require the theme service to be running. See also: system color. 


title-style capitalization 
For title-style capitalization: 


- Capitalize all nouns, verbs (including is and other forms of to be), adverbs (including than and when), 
adjectives (including this and that), and pronouns (including its). 


- Capitalize the first and last words, regardless of their parts of speech (for example, The Text to Look For). 
- Capitalize prepositions that are part of a verb phrase (for example, Backing Up Your Disk). 
- Don't capitalize articles (a, an, the), unless the article is the first word in the title. 


- Don't capitalize coordinate conjunctions (and, but, for, nor, or), unless the conjunction is the first word in the 
title. 


- Don't capitalize prepositions of four or fewer letters, unless the preposition is the first word in the title. 


- Don't capitalize to in an infinitive phrase (for example, How to Format Your Hard Disk), unless the phrase is 
the first word in the title. 
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- Capitalize the second word in compound words if it isa noun or proper adjective, an "e-word," or the words 
have equal weight (for example, E-Commerce, Cross-Reference, Pre-M icrosoft Software, Read/Write Access, 
Run-Time). Do not capitalize the second word if it is another part of speech, such as a preposition or other 
minor word (for example, Add-in, How-to, Take-off). 


- Capitalize user interface and application programming interface terms that you would not ordinarily 
capitalize, unless they are case-sensitive (for example, The fdisk Command). Follow the traditional 
capitalization of keywords and other special terms in programming languages (for example, The printf 
Function, Using the EVEN and ALIGN Directives). 


- Capitalize only the first word of each column heading. 
toolbar 
A graphical presentation of commands optimized for efficient access. 
tooltip 


A small pop-up window that labels the unlabeled control being pointed to, such as unlabeled toolbar controls or 
command buttons. 


touch 

Direct interaction with a computer display using a finger. 
U 

usability study 


A research technique that helps you improve your user experience by testing your UI design and gathering 
feedback from real target users. Usability studies can range from formal techniques in settings such as usability 
labs, to informal techniques in settings such as the user's own office. But the constants of such studies are: 
capturing information from the participants; evaluating that information for meaningful trends and patterns; and 
finally implementing logical changes that address the problems identified in the study. 


User Account Control 


With User Account Control (or UAC, formerly known as "Least-privilege User Account," or LUA) enabled, 
interactive administrators normally run with least user privileges, but they can self-elevate to perform 
administrative tasks by giving explicit consent with the Consent UI. Such administrative tasks include installing 
software and drivers, changing system-wide settings, viewing or changing other user accounts, and running 
administrative tools. 


User Account Control shield 
A shield icon used to indicate that a command or option needs elevation for User Account Control. 
user input problem 


An error resulting from user input. User input problems are usually non-critical because they must be corrected 
before proceeding. 
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user scenario 

A description of a user goal, problem, or task in a specific set of circumstances. 
V 

W 

warning 


A message that describes a condition that might cause a problem in the future. Warnings aren't errors or 
questions. In Windows Vista and later, warning messages are typically displayed in task dialogs, include a clear, 
concise main instruction, and usually include a standard warning icon for visual reinforcement of the text. 


welcome page 


The first page of a wizard, used to explain the purpose of the wizard. Welcome pages are no longer 
recommended. Users have a more efficient experience without such pages. 


window 


A rectangular area on a computer screen in which programs and content appear. A window can be moved, 
resized, minimized, or closed; it can overlap other windows. Docking a child window converts it to a pane. See 
also: pane. 


Windows logo key 


A modifier key with the Windows logo on it. This key is used for a number of Windows shortcuts, and is reserved 
for Windows use. For example, pressing the Windows logo key displays or hides the Windows Start menu. 


wireframes 


A UI mockup that shows a window's functionality and layout, but not its finished appearance. A wireframe uses 
only line segments, controls, and text, without color, complex graphics, or the use of themes. 


wizard 


A sequence of pages that guides users through a multi-step, infrequently performed task. Effective wizards 
reduce the knowledge required to perform the task compared to alternative Uls. 


work area 


The onscreen area where users can perform their work, as well as store programs, documents, and their 
shortcuts. See also: desktop. 

X 

Y 

Z 

Z order 
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The layered relationship of windows on the display. 
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